Component-State Styling of SVGs

[justinmcbride]

Hi there,

I was wondering how I could combine the Component State styling (specifically looking for component-hover) to affect the fill (or really, any of the props) for the SVG classes.

This might show the code that I was trying, using react-native-heroicons):

<Pressable className='component'>
  <PlusIcon size={32} className='component-hover:fill-red-500' />
</Pressable>

Referencing the SVG documentation here I can see that you need to take another approach to the SVG fill by using a prop instead of a normal class. I'm just not sure of the best way to proceed here. Any advice is welcome.

Thank you!

[justinmcbride]

I was able to figure it out pretty quickly after posing this question, using the styled API that you have documented here!

This is the code that ended up working:

const StyledPlus = styled(PlusIcon, {classProps: ["fill"]})

const MyPlusIcon = ({ fill, ...props }) => {
  return (
    <StyledPlus {...props } fill={fill} />
  )
}
<Pressable className='component'>
  <MyPlusIcon size={32} fill='fill-white component-hover:fill-blue-500' />
</Pressable>

Honestly, I'm not sure that I exactly understand how the styled API transforms the properties and what magic happens behind the scenes, but that may just come with time.

Perhaps my only remaining question might be which type I need to declare on the following line:

const MyPlusIcon = ({ fill, ...props }) => {

It produces the error Binding element 'fill' implicitly has an 'any' type.ts(7031) during the tsc command. I don't believe that this would be an issue of the nativewind library, but rather just a general issue when one doesn't have access to the props interface for the type that you're styling.

In the react-native-heroicons case, it looks like the Props interface isn't exported, and as such I can't extend upon it to add something akin to

interface IconProps extends PlusIcon.Props {
  fill: string;
}

to properly define the type for the above erroring line.

[marklawlor]

Glad you got it working!

At a technical level classProps does one of two things depending on the platform.

For web, it simply adds the prop to the className string.

For native, a pseudo coded version looks like this

<MyPlusIcon fill={StyleSheet.flatten(transformTailwind('fill-white component-hover:fill-blue-500'))['fill']} >

As for the types, you will need to use declaration-merging. Since the props are not exported, you can simply merge onto the SvgProps that it extends from

[justinmcbride]

Thank you for the response! It was very informative and I understand what's happening now. Appreciate your work on this project.