React项目中以ReactComponent导入多个SVG时颜色失真如何修复

多个SVG导入后颜色失真的核心原因是不同SVG文件内部使用了重复的全局ID。
SVG的渐变（linearGradient/radialGradient）、裁剪路径（clipPath）、蒙版（mask）等元素都依赖id属性定义，浏览器会把id视为全局唯一标识，当页面存在多个相同id的SVG元素时，后面加载的SVG的id定义会覆盖前面的，导致前面的SVG错误引用了后加载的渐变/裁剪规则，最终出现颜色、形状失真的情况，只有最后一个加载的SVG能正常引用自己的id定义。

以下方案按实现成本从低到高排序：

• 静态引用无动态改色需求：用img标签加载SVG
  直接把SVG作为静态资源通过img标签引入，SVG会运行在独立的上下文，内部id不会和页面全局id冲突，代码示例：

import avatar1Src from "../assets/avatar1.svg";

<Avatar sx={{ width: "5rem", height: "5rem", margin: "0 auto" }}>
  <img src={avatar1Src} alt="头像" />
</Avatar>

该方案的缺点是无法通过CSS/JS直接修改SVG内部的fill、stroke等属性。

• 批量自动处理id冲突（推荐）
  如果需要动态修改SVG样式，可通过打包工具的SVGR插件配置，自动给每个SVG的id添加唯一前缀，避免全局冲突：
  以Vite项目为例，配置vite-plugin-svgr的svgo规则：

// vite.config.js
import svgr from 'vite-plugin-svgr'

export default {
  plugins: [
    svgr({
      svgrOptions: {
        svgoConfig: {
          plugins: [
            {
              name: 'prefixIds',
              params: {
                prefix: ({ path }) => path.split('/').pop().replace('.svg', ''),
              },
            },
          ],
        },
      },
    }),
  ],
}

如果是Create React App项目，可通过craco等工具修改webpack的svgr配置，开启prefixIds插件即可，无需手动修改每个SVG文件。

• 手动修改SVG文件
  如果不想改打包配置，可手动修改每个SVG的id为唯一值，同时同步修改所有引用该id的属性：
  比如把avatar1.svg里的id="gradient0"改为id="gradient0_avatar1"，对应的fill="url(#gradient0)"同步改为fill="url(#gradient0_avatar1)"，所有id和引用都修改完成后即可解决冲突。

内容的提问来源于stack exchange，提问作者Omar Al Seddik