Vue3+Vite项目中单个SVG Symbol图标(check-circle)无法渲染排查

开发基于Vue 3和Vite的项目时，遇到SVG Symbol渲染异常问题：同一SVG Sprite文件内其他图标均可正常渲染，但check-circle图标作为Symbol引用时无法显示。

想确认该问题属于以下哪类：

• SVG问题
• Vue问题
• Vite问题
• 浏览器问题
• JS缓存问题
• 其他类型问题

已执行的排查步骤 #

1. SVG Symbol定义：SVG Sprite文件中定义了search、hamburger等多个Symbol，check-circle定义格式与其他图标一致：

<symbol id="check-circle" width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
</symbol>

2. Vue组件使用方式：在Vue组件中通过如下代码引用该图标：

<bek-icon icon="/public/ui-icons.svg#check-circle" />

其他图标均可正常渲染，但check-circle图标不显示。

3. 排查操作：

• 检查SVG文件语法错误与不一致性；
• 验证Symbol ID与Vue组件引用匹配；
• 直接在HTML中测试SVG，check-circle可正常渲染；
• 开发者工具显示use元素存在但未渲染图标。

4. 配置信息：Vite中SVG处理相关配置片段如下：

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('/public', import.meta.url)),
    }
  }
})

问题 #

为何仅check-circle图标作为Symbol在Vue组件中无法渲染，其余图标正常？该问题是否与Vite处理SVG文件有关，或是Symbol定义/使用方式存在问题？恳请提供思路与解决方案。

环境信息 #

• Vue 3
• Vite
• SVG Sprite文件位于/public目录
• 图标以SVG Symbol方式使用

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