I want to show some custom icons in a theme where there are no icons by default. It generally works fine, but I’m not able to use currentColor for the fill.
So this works:
&::before {content: svg-uri('<svg fill="red" ...
But this doesn’t, it just defaults to black:
&::before {content: svg-uri('<svg fill="currentColor" ...
Did anyone do that before? I’m not sure what I’m missing…
As far as I know currentColor won’t work with SVGs inlined with CSS, unfortunately the colors need to be hardcoded in the SVG. One workaround I’ve used before to change the colors are CSS filters, but those have shortcomings as well.
Ah ok. Thanks @awesomerobot! That sounds like the only approach that would also support different color schemes is having the icons in the markup?
Yes, unfortunately! I wish there were a better way with CSS, as it can be the easier way to add a decorative icon in some places.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.