Svelte & Tailwind Dynamic Icon Color

[zFlxw]

Hey.

I am using the svelte library of Lucide alongside with TailwindCSS. I want to use a color from my Tailwind config without having to hardcode it in the "color" prop of the icon component. Reading the Tailwind config (https://tailwindcss.com/docs/configuration#referencing-in-java-script) is not an option for me. Does anybody have an idea?

[ericfennis]

Yes you can use: text-{color}.

For example

<Airplay class="text-red-500" />

Will make the icon red!

[zFlxw]

Odd, I tried this multiple times and it did not work. However, it seems to be working now. Maybe I chose an invalid color last time 🤔. Thank you!

[ShravanSunder]

@ericfennis in the same vein, is it possible to use a tailwind class for size as well?

[ericfennis]

@ShravanSunder you can use width and height classes. For example w-8 h-8.