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!23 Replies
Just fyi, inline is <svg>
also why can't you use it? I'm kinda lost on that part.
What you are doing now is setting a background image to a div... You are not going to be able to be dynamic that way
Yeah it seems to be impossible
Yea but again why can't you just have a real inline svg?
I'm trying to add an icon to an input
I think i may have actually found a much better way to create my input but still wanted to see if somebody knew some black magic way to recolor this svg
https://codepen.io/Vasco-Gama/pen/GRwNYMJ
with inline you can just do this
Yea that or use custom props with fallback to current color
yeah with an svg tag it's easy but i can't use one
fill="var(--fill, currentColor)" (this works great for use:# and sprites)i think i actually found a cool way to do what i want with clip paths so i sort of solved my problem
but would be cool if it was possible this way
Well if you need further help its best to show us the bigger picture.
Lots of ways to do things 😄
it would be possible to use filter to change the color if only i didn't have that background-color to worry about...
or i could use filter on a
::before pseudo element which avoid tinting the bgbut why does it need to be a bg image?
I want clean markup :)
Again you need to show us the bigger picture and why you are piggon holing your self
ok that is just silly ... sorry not sorry
xD
Yeah :)
use a sprite then
I'm challenging myself here
You making a form?
put the inline up top, then use <use>
or you can use extrenal
either way you can have the power that way, and "clean markup"
https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/
You can do what I said above and have some amazing control using custom props/currentColor
I'm making a switch like this and wanted to have two icons on the left and right
checkmark is revealed when you check the box
Okay I managed to get what i wanted using animated clip-paths
Looks great gj!