Feature Request / Tag SVG elements with lucide-specific classes

Tagging SVG icon elements with lucide specific classes like

<svg class="lucide lucide-{icon-name}">…</svg>

would make much more easier to reference them from CSS stylesheets, in order for instance to:

• factor app-wide sizing / stroke properties
• tweak sizing / alignment for specific icons

P.S. Suggestion born from a real-world struggle in keeping icons aligned with button labels using fonts with an atypical baseline…

[queenvictoria]

Thanks @ericfennis

For a user new to yarn: following are complete instructions for testing a package from a monorepo.

WARNING: Apple silicon follow this guide first.

Outside your project

$ git clone [e-mail]:lucide-icons/lucide.git
$ cd lucide
$ npm install --global yarn
$ yarn install # May fail on Apple silicon see warning above.
$ yarn lucide-vue build
$ cd packages/lucide-vue
$ yarn link

Inside your project

$ yarn link lucide-vue

Note: After this you may experience a large number of linting errors. This is because the package is outside your app root. There are a number of ways to fix this. One way is to exclude lucide-vue from linting.

$ echo lucide-vue >> .eslintignore

[queenvictoria]

Oh sweet!