DEV Community

Cover image for SVG inherit Color
Paul Ryan
Paul Ryan

Posted on

1

SVG inherit Color

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:
Picture of button

On hover of this button, we will change the background to be blue and the color of the text to be white.
Hover of Button

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>


Enter fullscreen mode Exit fullscreen mode

We give the circle fill the value currentColor which will use whatever color we set our text to be.

So now on hover we have:
Hover Done Right

And that's all there is folks, hope you learned something.

Here is the Codepen with all the code:

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more