Svg Path stroke color should not fixed to '#000' instead of 'currentColor'

[zhangriyueming]

Svg Path stroke color should not fixed to '#000' instead of 'currentColor'

[ShimiSun]

Can you please explain what do you mean by currentColor and how you are trying to use it?

[DavidJFelix]

@ShimiSun I found this issue wanting the same thing. I'm trying to use the icons with react-icons and I was unable to change the color of grommet icons in the same way that I'm able to with others like font-awesome and feather. The currentColor ask is that rather than define the stroke as #000, it be set to the SVG label currentColor. This means that by default in HTML, it will be black, but if a user sets a font color in a parent HTML element, the SVG will use that color for the stroke color. This allows people to easily style the icons for whatever they're doing.

It doesn't seem like react-icons has a way to pass parameters to grommet icons outside of css styling.

[aravindanve]

@zhangriyueming @DavidJFelix you are right. If you are looking for a temporary solution, overriding the stroke using css worked for me. But the caveat is you will have to add the class my-grommet-icon to your icon component:

.my-grommet-icon path {
  stroke: currentColor;
}

Or if you are using styled-system, theme-ui or rebass, you could do this:

const GrIconWrapper = ({ icon: Icon, sx, ...props }) => (
  <Box
    {...props}
    as={Icon}
    sx={{
      ...sx,
      path: {
        stroke: 'currentColor',
      },
    }}
  />
);

// and use it like
<GrIconWrapper icon={GrForwardTen} />

[TomasB]

@ShimiSun It's a simple search and replace across all files. Do you need help with this? Should take only minutes to fix to make them usable.

[ShimiSun]

@ShimiSun It's a simple search and replace across all files. Do you need help with this? Should take only minutes to fix to make them usable.

Go for it buddy, thanks!

[TomasB]

@ericsoderberghp @alansouzati It seems that having non "#" starting color value breaks StyledIcon ?

[ShimiSun]

@TomasB Not sure what you are asking, would you like to file a contribution with the suggested fix you have in mind?