I’m working on a Vue 3 project using Vite, and I’m encountering an issue with SVG symbols not rendering correctly. Specifically, one of my icons (check-circle) does not show up when used as a symbol reference, while all other icons in the same SVG sprite file render without any problems.

I’ve also posted a bug report on Vite with full details

But I want to know if this is:

• SVG problem
• Vue problem
• Vite problem
• Browser problem
• Caching of JS problem
  or other type of problem.

Here’s what I’ve done so far:

1. SVG Symbol Definitions: I have an SVG sprite file that defines multiple symbols, including search, hamburger, notification, play, dots-vert, and check-circle. All of these icons are defined similarly:

<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. Usage in Vue Component: I am referencing these symbols in my Vue component like this:

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

All other icons render perfectly, but the check-circle icon does not appear.

3. Troubleshooting Steps:

   • Checked the SVG file for syntax errors or inconsistencies.
   • Verified that the symbol ID matches the reference in the Vue component.
   • Tested the SVG directly in HTML, and the check-circle icon renders correctly.
   • Inspected with developer tools, and the use element is present but not rendering the icon.

4. Configuration: I’m using Vite for development, and here’s part of my Vite config for handling SVGs:

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

My Question:

Why is only the check-circle icon failing to render when used as a symbol in my Vue component, while all other icons work fine? Could this be related to Vite’s handling of the SVG file, or is there something wrong with how the symbol is defined or used? Any insights or solutions would be greatly appreciated.

Environment:

• Vue 3
• Vite
• SVG sprite file in /public directory
• Icons used as SVG symbols