Change svg color with vite-plugin-svgr-CodePudding

I'm using vite with emotion and vite-plugin-svgr. I want to change the color of MyIcon. I've tried fill, color etc. but it's not working. What am I supposed to do?

import { ReactComponent as MyIcon } from "../icons/dummy.svg";

function MyComponent() {
  const icon = css({
    fill: "blue", // this is not working
  });

  return <MyIcon css={icon} />;
}

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="#FF0000">
    <path d="..." style="fill: rgb(0, 0, 0);"/> 
</svg>

CodePudding user response：

I needed to change the fill of my .svg file to currentColor.

If one does not want to edit the .svg file, SVGR gives the option to replace an attribute: https://react-svgr.com/docs/options/#replace-attribute-value

But be careful that only element attributes can be replaced, not style attributes. So first they need to be converted using convertStyleToAttrs: https://github.com/svg/svgo#built-in-plugins