Gatsby中gatsby-plugin-react-svg仅渲染首个SVG其余图标复用问题

该异常和SVG资源引入路径、插件基础规则配置无关，核心诱因是内联SVG的内部ID全局冲突：

• 绝大多数设计工具导出的SVG文件，会默认使用极简的通用命名定义内部元素ID，比如clip0、mask1、linearGradient2这类，不同SVG文件之间出现重名ID的概率极高。
• gatsby-plugin-react-svg 底层依赖SVGR将SVG文件转换为React内联组件，渲染时所有SVG的内部DOM节点会直接插入全局页面DOM树。浏览器解析SVG内的资源引用（比如裁剪路径、渐变、蒙版的url(#xxx)语法）时，会默认匹配DOM树中第一个对应ID的元素，最终导致除首个加载的SVG外，其余SVG的所有ID引用全部指向第一个SVG的内部资源，出现显示效果复用错乱的问题。
• 你贴出的业务代码中存在Js/Vue/Rea/Next四个组件未导入的笔误，该问题会触发组件未定义报错，和本次SVG显示复用的异常无关，补充对应导入语句即可。

可根据项目场景任选一种方案解决：

方案1：配置插件自动生成唯一ID（推荐，零SVG文件修改成本） #

修改gatsby-config.js中的gatsby-plugin-react-svg配置，开启SVGO的ID自动前缀能力，从编译层面给每个SVG的内部ID加上唯一标识，从根源避免冲突，配置参考如下：

{
  resolve: "gatsby-plugin-react-svg",
  options: {
    rule: {
      include: /\.inline\.svg$/,
    },
    svgoConfig: {
      plugins: [
        {
          name: "preset-default",
          params: {
            overrides: {
              cleanupIds: {
                minify: false,
                force: true,
              },
              removeViewBox: false,
            }
          }
        },
        "prefixIds"
      ]
    }
  }
}

配置修改完成后，先执行gatsby clean清除项目编译缓存，再重启开发服务重新编译即可生效。

方案2：手动修改SVG源文件保证ID唯一 #

如果项目内SVG文件数量很少，可以手动逐个打开SVG文件，将内部所有ID、以及对应的url(#xxx)引用修改为带文件标识的唯一命名。比如HTML图标内的id="clip0"修改为id="html-clip0"，对应的clip-path="url(#clip0)"同步修改为clip-path="url(#html-clip0)"，所有ID无重名后即可正常显示。该方案维护成本随SVG数量上升快速增加，仅适合少量SVG的场景。

方案3：调整SVG加载方式规避内联ID冲突 #

如果业务不需要操作SVG的内部属性（比如修改颜色、动态控制路径），可以放弃内联组件的加载方式，改用普通img标签引入SVG资源。这种渲染模式不会将SVG内部DOM插入全局页面树，自然不会产生ID冲突问题。

注意：所有涉及Gatsby插件配置、静态资源处理的修改，都建议先执行gatsby clean清除缓存后再重新编译，避免旧缓存导致配置不生效。

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