4 ms·
But how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?
by faeyanpiraat 6y ago
But how do you actually apply the styling? Just add a class to the <use> tag which contains “color:red;” ?
- jarek-foksa 6y agoThis should work as long as the SVG shapes have the "fill" and/or "stroke" set to "currentColor".
- 8lall0 6y agoYou can export your SVGs with fill="currentColor" and your color attribute onto the SVG tag or its container would work. Since at $JOB i'm using SVG icons with more than one color, i use fill="var(--svg-color-base)" or fill="var(--svg-color-accent)" so i can precisely set which color i want, in a perfectly scope-able manner. The greatest advantage is that you can reference externally your svg with xlink.href on top of your website: you have to make one more request, but it's cacheable. Pick your tradeoff :)
- nikkwong 6y agoYou're saying you can embed all the SVGs onto one page, and then reference them on other pages/domains by using xlink.href? I haven't heard of this? So what you're describing is having site.com/page1 which has markup: <body> <svg id="icon-1"> ... </svg> </body> and then on site.com/page2 having <body> <svg> <use href="/page1#icon-1"> </svg> </body> Or something of this manner? Haven't encountered this, but sounds awesome; especially since you'd get the power of both inlining and caching the asset.
- f-word 6y agoEither fill: currentColor or fill: var(--iconColor, currentColor) should do the trick. I prefer the 2nd one because it lets me change iconColor whenever I find it appropiate