New feature: `absoluteStrokeWidth` option
Available for:
- `lucide-react`
- `lucide-vue`
- `lucide-vue-next`
- `lucide-svelte`
- `lucide-angular`
- `lucide-solid`
- `lucide-react-native`
- `lucide-preact`
Introducing `absoluteStrokeWidth`, an option to control the behavior of scaling `strokeWidth` in icons. A new option to control the look of Lucide icons.
By default, scaling up SVG icons will cause the `strokeWidth` to scale with the `viewBox` set on the SVG icon.
Setting `absoluteStrokeWidth` to `true`, the `strokeWidth` will remain the same size visually.
Visualised example
**Disabled** (Default, Current behavior, SVG default behavior)
`absoluteStrokeWidth: false`
**Enabled** (keeping the set strokeWidth in pixels)
`absoluteStrokeWidth: true`
React Code Example
js
import { Camera } from 'lucide-react';
const Compo = () => {
return <Camera color="red" size={48} absoluteStrokeWidth />;
};
export default App;
Update on `lucide-angular`
The package for angular got a similar API as the other packages. This means it got the same options to customize the look of Lucide Icons as the other packages.
Fixed SSR issues
The package now supports SSR, so you can use Lucide icons in your Angular application when using SSR.
Deprecations
The exported types `IconData`, `IconNode`, and `Icons` have been deprecated in favor of the less generic `LucideIconData`, `LucideIconNode`, and `LucideIcons`. They will still work for now, but be sure to update your code, as they will be removed in v1.0.
Breaking changes
The `createElement` helper method has been removed since its usage broke SSR and the TrustedHTML support.
Bugs
If you experienced any bugs related to this update, please open an issue.