StefanH
KPCKevin Powell - Community
•Created by StefanH on 6/24/2023 in #front-end
Change color of css 'inline svg' dynamically
Hi! I've been tearing my hair out with this for a while now.
I have an css inline svg which I want to change the fill color off dynamically in css. The codepen is here: https://codepen.io/stefanh-at/pen/QWJGZKd
Some restrictions I have for this:
- I can't use filter because the
background-color can't change and i have children which can't change either
- The svg has to be inline. I can't use a separate file or use an HTML <svg> tag
- I need to be able to change the fill color of the icon using either css custom properties or currentColor
- I can't use a clip-path to cut out the background since I need to put another icon in a different (dynamic) location
- I can't use a ::before or ::after pseudo element
Already looked into a lot of avenues so here's what doesn't work:
- Using fill='currentColor' doesn't work. This only applies to <svg> tags which I can't use in my markup
Yeah this is quite the restricting case but if there is some way which I've missed to recolor the svg, this would all be solved.
Hope someone can help!37 replies