两个渲染相同SVG的图标组件仅显示一个，首个仅屏幕消失无报错

问题排查方向与解决方法 #

• 最常见原因：SVG内部ID全局冲突
  设计工具导出的SVG文件通常会自动生成clipPath、linearGradient等内部资源的固定ID，ID在DOM中是全局唯一属性，两个相同SVG同时渲染时，后插入的SVG的ID会覆盖前一个的同名ID，前一个SVG引用对应资源时找不到匹配项就会变为透明，所以你会看到DOM中存在元素但页面不显示。
  解决方法：

  1. 打包工具配置自动前缀：使用SVG处理loader时开启ID前缀配置，比如@svgr/webpack开启prefixIds: true、vite相关SVG插件开启自动ID前缀即可，工具会自动给每个SVG的ID添加随机唯一前缀，避免冲突。
  2. 手动修改SVG：直接打开SVG源文件，修改所有ID和对应的属性引用，保证不同文件的ID不重复，适合临时快速修复。

• 循环渲染key异常
  如果你是在列表循环中渲染这两个图标，没有给每个图标绑定唯一key，框架的diff算法可能会错误复用节点导致渲染异常。
  解决方法：给每个图标绑定和业务数据关联的唯一key，不要用循环index作为key。

• 样式意外覆盖
  检查图标组件的CSS样式，有没有使用全局选择器设置visibility、opacity、display等属性，第二个图标渲染时可能覆盖了第一个图标的样式。可以打开浏览器元素检查器，选中消失的图标元素，查看样式面板是否有异常的样式规则被应用。

• getIcon逻辑错误
  检查getIcon的switch逻辑，是否存在不同入参返回同一个SVG组件引用、或者返回undefined的异常分支。

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