SVG Icons Not Displaying Correctly in Multi-Tabs (ID collision)

[mostafaznv]

I don't know if this is a bug report or a feature request because I think it is not directly related to nuxt-icons. However, there is a problem, and I reported it here in the hope that someone comes up with a solution.

Describe the bug When I use an SVG icon in 2 or more tab items, it doesn't display correctly.

To Reproduce

1. Define a multi-tab using vuetify.
2. Place the same SVG into all tabs
3. Observe that only the first item displays correctly

Expected behavior I expect all other SVGs in the other tabs to display correctly.

Desktop:

• OS: Mac
• Browser: Chrome/Firefox (It works with Safari but it has some other issues)
• Version: Latest Versions

Reproduction link: https://stackblitz.com/edit/github-remtxs-pnzwnx

Some Reaserch: I believe that nuxt-icons should prefix IDs of defs with a unique value for each render. Currently, it renders something like this for all SVGs in all tabs:

<defs>
    <linearGradient id="i" x1="64.421" x2="79.438" y1="71.286" y2="184.675" gradientUnits="userSpaceOnUse">...</linearGradient
    <linearGradient id="j" x1="52" x2="60.884" y1="46.942" y2="108.476" gradientUnits="userSpaceOnUse">...</linearGradient
    <linearGradient id="k" x1="107.644" x2="116.528" y1="46.942" y2="108.476" gradientUnits="userSpaceOnUse">...</linearGradient
</defs>

Since all of them are using the same ID (i, j, k), I think Chrome/Firefox only consider the defs of the first SVG, and when the first SVG is gone, all other SVGs face with the problem.

---

https://github.com/gitFoxCode/nuxt-icons/assets/7619687/2fc8d15b-9718-4c3c-ab58-333b4d8ac603

[mostafaznv]

In addition to multi-tabs, if someone uses services like SVGO to optimize SVG files, SVGO replaces all IDs of SVG files with short IDs (i, j, k), and multiple non-related SVGs could face conflicts.

Example: https://jsfiddle.net/jhmbunc7/ In this example (pure html/js), only the first SVG displays correctly, while the second and third are corrupted.

Even if someone doesn't use SVGO, there is still a chance to face conflicts, and developers always should manipulate the SVG manually to fix this type of issue.

Anyway, We can change IDs manually. But this workaround doesn't work when we are using SVGs into multi-tabs components.

Edit: I found an article about this issue: https://medium.com/pixel-and-ink/fix-duplicate-svg-id-collision-in-react-36bc9e068333 And there is a nice example describing it: https://codepen.io/antonjb/pen/JjGPbyy

[gitFoxCode]

thanks a lot for writing this issue up in such a way! Currently I don't have the time to address this issue, I will take care of it in the future, but you can try using the nuxt/icon module

[JuerGenie]

thanks a lot for writing this issue up in such a way! Currently I don't have the time to address this issue, I will take care of it in the future, but you can try using the nuxt/icon module

look like cause the icon's source code contain reference that use id, like this: fill="url(#gradient-color), multi icons render repeat id much time, and reference always use first matched defs's children (html rule it). when first matched defs's children hidden (e.g. display: none), reference will be hidden too.

so, I afraid nuxt/icon module has this problem too...

maybe <img> is the solution? no idea XD