Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why can't I color this SVG with the color CSS property

Tags:

css

svg

I am looking for a way to change the color of an SVG icon (without fill since it's not supported on IE11) and I saw that Github does it using the color property.

I got this SVG from Github (basically the star button). If I go on Github and inspect it using developer tools and then set a color (color: red) on it, I can get it to change color.

However if I copy it on my page and try to do the same it does not work:

.octicon-star {
  color:red;
}
<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>

Any ideas?

like image 590
ᴘᴀɴᴀʏɪᴏᴛɪs Avatar asked Sep 20 '25 06:09

ᴘᴀɴᴀʏɪᴏᴛɪs


1 Answers

You are looking for fill: CurrentColor. It changes the fill of the svg according to the value of color. Here's an article on CSS-Tricks on this.

Edit: Of course this uses fill aswell, but it's the method github is using.

.octicon-star {
  color: green;
}

svg {
  fill: currentColor;
}
<svg class="octicon octicon-star v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"></path></svg>
like image 114
Maharkus Avatar answered Sep 21 '25 21:09

Maharkus



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!