-
Notifications
You must be signed in to change notification settings - Fork 73
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
Deduplicating ids in attributes when multiple instances of the same icon are used on a page #170
Labels
Comments
Have the same issue |
I think this might be resolved by #186 ... |
Resolved by #222 |
I don't think this is closed by my branch, it only deals with the id's for the accessibility elements. This would need to somehow dedupe defined id's in the SVG file used across templates, I don't know that there is a way for this addon to ever deal with that. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Situation
My designer delivers SVG icons which contain ids like
id="a"
and CSSfill: url(#a);
.Multiple instances of this icon are used on a page. Since HTML assumes ids are unique, the CSS styles of all icon instances reference the
id="a"
element of the first instance of the icon and not elements belonging to each respective instance.As a result, when the first icon is removed from the page, the id references in the CSS of all other icons are pointing nowhere, so the styles stop being applied.
I am unable to teach the designer to change the source code of SVGs because they're not a technical person. And I don't want to manually edit all the SVGs that I use because it's tedious, prone to errors and regressions.
This has to be handled programmatically
Minimal reproduction
@lifeart has tossed together a minimal repro on Twiddle:
https://ember-twiddle.com/080585fba8d7d9714ed3c3a1a9c65b96?numColumns=2&openFiles=templates.application%5C.hbs,controllers.application%5C.js
What I've tried:
false
,{minify: false}
and custom prefixThese don't work. I can see applying these cause ids to change, but same ids are still shared across all instances of an icon!
My configuration
(one of the attempts)
The text was updated successfully, but these errors were encountered: