Current Color for Fills and Strokes

Several people have given me feedback on my grunt-svg-symbols plugin. They especially liked the idea of changing color values to currentColor, so that the icons inherit the text color. Therefore the updated plugin has an option to automatically replace the values of all fill and stroke attributes for you.

    svg_symbols: {
        options: {
            currentColor: true
        files: {
            'icons/user.svg': ['svg/user/*.svg']

The only prerequisite is of course, that your source SVG files contain some fill or stroke attributes. These can also be defined on groups or parent elements as the optimizer does a great job in merging them down to single paths.

<svg class="u-hidden">
    <symbol id="mail" viewBox="0 0 24 24">
        <path fill="currentColor" d="M77.766 17.152..."/>

If you encounter any bugs or have a feature request please let me know. You can also report issues directly to the GitHub repository of the grunt-svg-symbols plugin.

You can support via PayPal and buy me a 🍺 or a cup o’ joe.

Manuel Wieser, BSc MA

I’m an experienced front-end developer and versatile digital artist. I’m into building websites and creating content for real-time rendering, film and animation. I’m also a bearded hacker making games with my friends.

You can contact me via GitHub, Twitter or [email protected].

I’m currently working as a technical lead and full-stack web developer for, making software that helps people find the job of their dreams.