Same component is generated for different files

[andreww2012]

In some cases, exactly the same Vue component will be generated for different, independent .svg files. This happened to me when I was importing SVGs containing <image> tag, but it's likely related to <use> tag instead.

Reproduction

https://stackblitz.com/edit/vitejs-vite-3mdpmd?file=src%2FApp.vue

In App.vue you can uncomment the "or" section (and comment out the preceding code), and a different component will be used for the same imports.

Possibly related

• https://github.com/jpkleemans/vite-svg-loader/issues/114
• https://github.com/jpkleemans/vite-svg-loader/issues/122

[andreww2012]

The original 2 SVGs I had this issue with actually looked like the following

<svg width="98" height="192" viewBox="0 0 98 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="98" height="192" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_270_13987" transform="matrix(0.00431598 0 0 0.00218399 -6.77836 -0.0682731)"/>
</pattern>
<image id="image0_270_13987" width="1865" height="496" xlink:href="data:image/png;base64,...">
</defs>
</svg>

In which ids on the <image> tag were different, but ids on <pattern>/<rect> tags were not, and to my surprise, I managed to work around the issue with these files by ensuring IDs uniqueness in the latter case.