Icons that require fill don't change color on native

[aaronatbissell]

Description

When using a custom SVG Icon component that requires fill, changing that icon color using className='text-primary-500' doesn't work on native

CodeSandbox/Snack link

https://github.com/aaronatbissell/gluestack-issue-repro

Steps to reproduce

1. Go to https://github.com/aaronatbissell/gluestack-issue-repro
2. npm install
3. npm run ios
4. See the first icon doesn't change color

Code for the CheckIcon that needs to be filled:

const CheckIcon2 = createIcon({
  Root: Svg,
  viewBox: '0 0 448 512',
  path: (
    <>
    <Path
    d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"
    fill='currentColor'
    />
    </>
  ),
});
CheckIcon2.displayName = "CheckIcon2";
export {CheckIcon2};

<View style={{flex: 1}}>
  {/* Check Icon that needs to be "filled" */}
  <Icon as={CheckIcon2} size='xl' className='text-tertiary-500' />
  <Icon as={CheckIcon2} size='xl' className='text-primary-500' />
  <Icon as={CheckIcon2} size='xl' className='text-secondary-500' />
  <Icon as={CheckIcon2} size='xl' className='text-typography-950' />
</View>
{/* Gluestack Check Icon (only needs `stroke`) */}
<View style={{flex: 1}}>
  <Icon as={CheckIcon} size='xl' className='text-tertiary-500' />
  <Icon as={CheckIcon} size='xl' className='text-primary-500' />
  <Icon as={CheckIcon} size='xl' className='text-secondary-500' />
  <Icon as={CheckIcon} size='xl' className='text-typography-950' />
</View>

gluestack-ui Version

@gluestack-ui/icon: "0.1.22"

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[aaronatbissell]

Just another observation, if I set the fillColor on the Path of the SVG to something like red, then it displays correctly in red:

const CheckIcon2 = createIcon({
  Root: Svg,
  viewBox: '0 0 448 512',
  path: (
    <>
    <Path
    d="M440.1 103C450.3 112.4 450.3 127.6 440.1 136.1L176.1 400.1C167.6 410.3 152.4 410.3 143 400.1L7.029 264.1C-2.343 255.6-2.343 240.4 7.029 231C16.4 221.7 31.6 221.7 40.97 231L160 350.1L407 103C416.4 93.66 431.6 93.66 440.1 103V103z"
    fill='red' // <-- set this to `red` instead of `currentColor`
    />
    </>
  ),
});
CheckIcon2.displayName = "CheckIcon2";
export {CheckIcon2};

[aaronatbissell]

Even the example on the bottom of the Icon docs doesn't appear to be working

const GluestackIcon = createIcon({
    // createIcon function is imported from '@gluestack-ui/themed'
    viewBox: "0 0 32 32",
    path: (
      <>
        {/* Rect, Path is imported from 'react-native-svg' */}
        <Rect width="32" height="32" rx="2" fill="currentColor" />
        <Path
          d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z"
          fill="white"
        />
        <Path
          d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z"
          fill="white"
        />
        <Path
          d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z"
          fill="white"
        />
        <Path
          d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z"
          fill="white"
        />
      </>
    ),
  })

<Icon as={GluestackIcon} size="xl" className="text-typography-black" />

[rajat693]

The issue has been resolved with the gluestack-ui icons. Please update your icon component.
Thank you

[mnemitz]

This example from the icon docs still isn't working for me on v0.1.22:
#2385 (comment)

export const GluestackIcon = createIcon({
  Root: Svg,
  viewBox: "0 0 32 32",
  path: (
    <>
      {/* Rect, Path is imported from 'react-native-svg' */}
      <Rect width="32" height="32" rx="2" fill="currentColor" />
      <Path d="M9.5 14.6642L15.9999 9.87633V12.1358L9.5 16.9236V14.6642Z" fill="white" />
      <Path d="M22.5 14.6642L16.0001 9.87639V12.1359L22.5 16.9237V14.6642Z" fill="white" />
      <Path d="M9.5 19.8641L15.9999 15.0763V17.3358L9.5 22.1236V19.8641Z" fill="white" />
      <Path d="M22.5 19.8642L16.0001 15.0764V17.3358L22.5 22.1237V19.8642Z" fill="white" />
    </>
  ),
});

// Usage:

      <Icon as={GluestackIcon} size="xl" className="text-typography-black" />

[aaronatbissell]

I also had to make changes to my icon/index.tsx because I did a npx gluestack-ui add icon prior to #2387 getting merged in. If you did the same, then you will need to make the changes in #2387 manually or do the npx gluestack-ui add icon again.

[Viraj-10]

@aaronatbissell @mnemitz, Thanks for reporting we will have a look.

[mnemitz]

Thanks @Viraj-10 for the quick response! @aaronatbissell I re-added the icon package again as you mentioned to check, but still seeing a blue background when I set fill="currentColor".

Also thought I might flag that the GluestackIcon example on the docs page is missing the prop Root: Svg: https://gluestack.io/ui/docs/components/icon

[Viraj-10]

Thanks @mnemitz, We will add a test case for this. Since this is frequently breaking.

[aaronatbissell]

@aaronatbissell @mnemitz, Thanks for reporting we will have a look.

Just FYI - this is working for me now. I'm not sure if it's broken again, but it's working for me.

@mnemitz - I would double check that the changes in #2387 made it into your icon/index.tsx

[mnemitz]

@aaronatbissell Just had a quick look and it looks like there are minor differences between the latest icon/index.tsx and the one from the change you linked. The main difference I can see is that the color prop isn't passed directly to the SVG/ 'as' component (not sure if that causes the issue).

I guess there is an explicit check for stroke:

    } else if (stroke === "currentColor" && color !== undefined) {
      colorProps = { ...colorProps, stroke: color };
    }

Probably want an analogous check for fill === "currentColor".