React中使用react-svg-loader导入的SVG图标渲染一致问题排查

嘿，这个问题我之前帮不少开发者排查过，大概率是SVG内部元素冲突或者loader配置没到位搞的鬼，咱们一步步来拆解：

可能的成因 #

• SVG内部id重复：很多SVG导出工具（比如Figma、Sketch）会给路径、裁剪路径这类元素生成默认的id（比如path1、clipPath2）。当你把多个SVG作为React组件引入时，这些重复的id会在DOM里“打架”——浏览器只会渲染第一个匹配到id的元素，后面的SVG就会错误复用前面的元素内容，看起来和第一个图标一模一样。
• react-svg-loader未配置id前缀：如果loader没启用自动给SVG元素添加唯一标识的功能，就没法避免不同SVG之间的id冲突，自然会出现重复渲染的问题。
• webpack缓存干扰：虽然这个可能性相对小，但有时候缓存会让你修改后的SVG没生效，导致看起来两个图标没区别，不过你说不管顺序都一样，这个概率比较低，但也可以排查下。

修复方案 #

1. 手动修改SVG的重复id（快速临时方案） #

直接打开你的两个SVG文件，把里面所有元素的id改成唯一的。比如给MainLogo的id加上main-logo-前缀，Search的加上search-icon-前缀，确保两个文件里没有重复的id。

举个修改示例：
原本的SVG：

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip-path">...</clipPath>
  </defs>
  <path id="path-1" d="M10 20..." />
</svg>

修改后MainLogo的SVG：

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="main-logo-clip-path">...</clipPath>
  </defs>
  <path id="main-logo-path-1" d="M10 20..." />
</svg>

Search的SVG同理改成带search-icon-前缀的id。

2. 配置react-svg-loader自动添加唯一前缀（长期优雅方案） #

不想手动改每个SVG的话，可以在webpack配置里给react-svg-loader加上svgo的prefixIds插件，让它自动给每个SVG的内部元素id生成唯一前缀，从根源避免冲突。

修改你的webpack配置文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            options: {
              svgo: {
                plugins: [
                  { prefixIds: true } // 启用自动前缀插件
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

这个插件会自动给每个SVG里的id、引用关系都加上唯一的前缀，不用你再手动修改任何SVG文件。

3. 清除webpack缓存（排除干扰） #

如果前面的方法都没生效，试试清除webpack的缓存：

• 生产环境运行npm run build --no-cache
• 开发环境下，可以删除node_modules/.cache目录，或者重启dev-server时加上--no-cache参数

内容的提问来源于stack exchange，提问作者Filth