使用vite-plugin-svgr修改SVG图标颜色的问题

问题原因 #

你的SVG文件里，<path>标签带有内联style="fill: rgb(0, 0, 0);"，同时SVG根标签也设置了fill="#FF0000"。这些内联样式的优先级远高于Emotion注入的外部CSS，导致你设置的fill: blue无法生效。

解决方案 #

方案1：清理SVG内部的硬编码样式（推荐） #

直接编辑你的dummy.svg文件，移除所有硬编码的fill属性和内联样式：

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
    <path d="..."/>
</svg>

修改后，原代码中的Emotion样式就能正常生效：

import { ReactComponent as MyIcon } from "../icons/dummy.svg";
import { css } from '@emotion/react';

function MyComponent() {
  const icon = css({
    fill: "blue", // 现在可以正常生效
  });

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

方案2：强制覆盖（不推荐，仅应急用） #

如果无法修改原SVG文件，可以用!important强制提升样式优先级：

const icon = css({
  fill: "blue !important",
});

注意：这种方法会破坏CSS优先级的正常逻辑，可能引发后续样式冲突，尽量避免使用。

方案3：直接通过props传递样式 #

也可以直接给SVG组件传递style属性，效果和Emotion样式一致（同样需要先清理SVG内部硬编码）：

function MyComponent() {
  return <MyIcon style={{ fill: "blue" }} />;
}

内容的提问来源于stack exchange，提问作者julian.a