-
Notifications
You must be signed in to change notification settings - Fork 23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG Icons Not Displaying Correctly in Multi-Tabs (ID collision) #45
Comments
In addition to multi-tabs, if someone uses services like Example: 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: |
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 so, I afraid nuxt/icon module has this problem too... maybe |
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
Expected behavior
I expect all other SVGs in the other tabs to display correctly.
Desktop:
Reproduction link:
https://stackblitz.com/edit/github-remtxs-pnzwnx
Some Reaserch:
I believe that
nuxt-icons
should prefix IDs ofdefs
with a unique value for each render.Currently, it renders something like this for all SVGs in all tabs:
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.
nuxt-icons.mp4
The text was updated successfully, but these errors were encountered: