-
Notifications
You must be signed in to change notification settings - Fork 39
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
Replace ids with unique ids #73
Comments
For the original purpose that works, but where this would potentially be nice to have would be for the |
I am having the same problem. |
For the original styling issue, now with v9.1.0, this works: svg.red {
path[id=symbol] {
fill: red;
}
}
svg.blue {
path[id=symbol] {
fill: blue;
}
} <svg-icon src="assets/csv.svg"></svg-icon>
<svg-icon src="assets/csv.svg" class="red"></svg-icon>
<svg-icon src="assets/csv.svg" class="blue"></svg-icon> Also, I'm still thinking about good way to implement unique ids. |
I'm running into a similar issue with non-unique Ids within svgs. The svg I'm using has a |
Problem:
Trying to load an svg in multiple components, then change the color in one components, but not have it affect the other svg. Inside of the svg, the color is in a tag and uses a url(#ID).
When I modify the color using CSS inside of a component (Ex. svg path { fill: white }), every instance of that SVG is changed instead of the specific icon in that component that the css applies to.
Proposed Solution:
Give the option to scope the SVG somehow, and potentially load numerous copies.
In order to avoid id overlap in this solution, string-replace/append each id with a unique scope id.
Example SVG that I am using (see "#csv-a" for the id I am referring to):
csv.svg
The text was updated successfully, but these errors were encountered: