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