Gradient for icons?

[manuelpoelzl]

Hi,

Is there a way to apply a gradient to an icon?
I've seen #1455 , but that doesn't seem to be the best solution, as I would have to render a separate SVG element for each gradient.

A built-in solution would be nice.

Thanks!

[karsa-mistmere]

Hi @manuelpoelzl,

Personally, I think Lucide is by nature an icon library, not a UI kit, implementing a proper solution for adding gradient support to our icons falls well outside a range of what a simple icon lib should be doing.

Gradient definitions should in practice be declared just once per app and reused over and over again by their IDs, however, the way each of our JS libraries could handle this varies vastly based on the library itself (e.g. in React we could use an app wrapper component and states, in Angular an injectable service and Renderer2 etc), so it would be super hard to implement a consistent and similar solution between different libraries and in some cases would require a lot of heavy lifting to properly do something that could be much easier done manually - and most of the work, in practice, would still have to be done pretty much manually (that is, defining and declaring the gradients themselves as SVG code to keep the solution fully customizable).

My recommendation would be to simply:

1. add a hidden SVG element which lists the gradient definitions
2. add helper CSS classes that set the appropriate gradient strokes
3. simply add a CSS class to your icons

In essence something akin to this:
https://codesandbox.io/p/sandbox/charming-neumann-8dr9sk

[manuelpoelzl]

Thank you very much for your explanation, this makes sense of course!
I followed your approach and got the desired result.

Thanks!