Put CSS into SVG Sprite Sheet

holly.bu...@clinicalink.com

unread,

Nov 16, 2015, 12:56:13 PM11/16/15

to IcoMoon

#icon-visit{
fill: purple;
}

]]>
</style>
<defs>
<symbol id="icon-visit" viewBox="0 0 1024 1024">
<title>visit</title>
<path class="path1" d="M832 960l192-512h-832l-192 512zM128 384l-128 576v-832h288l128 128h416v128z"></path>
</symbol>
</defs>
</svg>

This is my very simple sheet - I wanted to change the fill of my icon with CSS in the sprite sheet itself since I'm using <use> to put it into my HTML but no matter what I put - if I put the fill on the path, stroke or color, or if I do fill/stroke/color on the #icon-visit itself...

How do you actually change the fill color of an icon when it's style in the sheet itself?

Thank you!

Keyamoon

unread,

Nov 16, 2015, 2:20:06 PM11/16/15

to IcoMoon

Refer to the style.css file that IcoMoon generates. Styling single color icons via CSS is as simple as:

.icon-visit {

color: purple; // yes, color, not fill; because we previously set fill to "currentColor"

}

If you still couldn't solve the problem, please prepare a reduced test case on codepen.io or jsbin.com or similar services.

holly.bu...@clinicalink.com

unread,

Nov 16, 2015, 2:29:53 PM11/16/15

to IcoMoon

I can't put the SVG into codepen, though.

This code makes the icon appear no problem. In the actual SVG file, not in a CSS file, I'm trying to get the color to change on the icon. I posted the actual SVG code up above. If I change it to color instead of fill, nothing changes.

color: purple;

Keyamoon

unread,

Nov 16, 2015, 2:34:23 PM11/16/15

to IcoMoon

You don't need to put the CSS inside the SVG. Please take a few minutes and take a look at the files that IcoMoon generates. Using the color attribute works if you set fill to "currentColor". See the style.css generated by IcoMoon.

holly.bu...@clinicalink.com

unread,

Nov 16, 2015, 2:44:49 PM11/16/15

to IcoMoon

Ahh, I finally see what you're saying. Thank you very kindly for your patience!

Reply all

Reply to author

Forward