0

I'm building a component which displays SVG icons from the public folder. The component accepts name, height, width and color and should return the according icon in the right size and color. Here's what I tried:

type Props = {
  name: string;
  height: number;
  width: number;
  color?: string;
};

const Icon = ({ name, height, width, color }: Props): ReactElement => {
  const path = `/icons/${name}.svg`;
 return (
    <div>
      <Image src={path} alt="" height={height} width={width} color={color}/>
    </div>
  );
};

The icon gets displayed when I use the component (e.g. <Icon name="student" width={64} height={64} color="#03fc94"/>) but I cannot change the color, even when I hard-code it. It just won't change- I tried following properties: color, stroke, style, fill. I also tried changing the color with CSS.

In the icon itself I changed the "fill" property in to "currentColor". Any ideas?

Jonas
  • 121,568
  • 97
  • 310
  • 388
Jo_K
  • 51
  • 5
  • 1
    Does this answer your question? [How can I change the color of an 'svg' element?](https://stackoverflow.com/questions/22252472/how-can-i-change-the-color-of-an-svg-element) – RubenSmn May 02 '23 at 14:18
  • Thank you for your suggestion @RubenSmn. I was reading it before and the answers suggest using an tag or libraries, which are both not an option for me due to workflow, hard-coding the color inside the SVG or changing the CSS which I tried... I would really love stick to the next/image solution that I have. – Jo_K May 02 '23 at 14:23
  • 1
    Unfortunately its not possible at the moment – RubenSmn May 02 '23 at 14:26
  • That's a bummer but thank you for your help anyway. Another try would be to work with tag. Here's what I tried: ` ` - but nothing shows up at all. I can see the svg in the console but that's it. Do you know what could be the issue here? – Jo_K May 02 '23 at 14:52

0 Answers0