Let's Go
Nice short post for you guys but I think it's going to be a beneficial one.
Imagine we have a button like so:
On hover of this button, we will change the background
to be blue
and the color
of the text to be white
.
As you can see our SVG remains the same color, thankfully we can have our SVG inherit the color of the button text.
We do this like so:
<svg height="25px" width="25px" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="currentColor" />
</svg>
We give the circle fill
the value currentColor
which will use whatever color we set our text to be.
And that's all there is folks, hope you learned something.
Here is the Codepen with all the code:
Top comments (0)