Lucide Svelte (javascript / icons)

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

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.