Support for NativeWind using "className"

[MarcusSanchez]

Package

• lucide
• lucide-angular
• lucide-flutter
• lucide-preact
• lucide-react
• lucide-react-native
• lucide-solid
• lucide-svelte
• lucide-vue
• lucide-vue-next
• Figma plugin
• all JS packages
• site

Description

Support styling with NativeWind's className prop.

Use cases

Would implement nicely with preexisting NativeWind code as well as be familiar to web developers who use Lucide React with Tailwind.

Checklist

• I have searched the existing issues to make sure this bug has not already been reported.

[karsa-mistmere]

What exactly do you want to style? Like can you give an example (or few) on how you would like to use this?

[MarcusSanchez]

What exactly do you want to style? Like can you give an example (or few) on how you would like to use this?

Anyone using Nativewind would like to keep styling consistent, I don't like mixing the two when it doesn't make sense.

But the area in which I think would get most use out are the variant selectors such as "group:", "focus:" amongst other things. I for example am trying to do something where if the input next to the icon is in focus, to change the color of the icon, but its hard when I'm only familiar with doing it in Tailwind/Nativewind.

[karsa-mistmere]

What exactly do you want to style? Like can you give an example (or few) on how you would like to use this?

Anyone using Nativewind would like to keep styling consistent, I don't like mixing the two when it doesn't make sense.

But the area in which I think would get most use out are the variant selectors such as "group:", "focus:" amongst other things. I for example am trying to do something where if the input next to the icon is in focus, to change the color of the icon, but its hard when I'm only familiar with doing it in Tailwind/Nativewind.

Icons inherit color, so you could easily put the icon inside a wrapper element that you set your tailwind classes on.

[MarcusSanchez]

What exactly do you want to style? Like can you give an example (or few) on how you would like to use this?

Anyone using Nativewind would like to keep styling consistent, I don't like mixing the two when it doesn't make sense.
But the area in which I think would get most use out are the variant selectors such as "group:", "focus:" amongst other things. I for example am trying to do something where if the input next to the icon is in focus, to change the color of the icon, but its hard when I'm only familiar with doing it in Tailwind/Nativewind.

Icons inherit color, so you could easily put the icon inside a wrapper element that you set your tailwind classes on.

I'm attempting to do it and I can't seem to get that to work? Can you give me demo code?

[karsa-mistmere]

I'm attempting to do it and I can't seem to get that to work? Can you give me demo code?

Here, you don't even necessarily need a wrapper: codesandbox link

[MarcusSanchez]

It appears you're showing me a wrapped icon from "react-native-vector-icons/FontAwesome", when I'm trying to style a "lucide-react-native" icon.

[karsa-mistmere]

Sorry, wrong link. It must be something on Codesandbox's side, because I triple checked the copied link and it always came out wrong. 🤔

I've updated it manually now.

[MarcusSanchez]

So I see that its working, but you're using "lucide-react' and not "lucide-react-native", and more than likely this is the web compiled version, which is why its working? But I'm not sure.