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.

grunt.initConfig({
    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..."/>
    </symbol>
</svg>

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 manu.ninja via PayPal and buy me a 🍺 or a cup o’ joe.

Manuel Wieser

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 full-stack web developer for karriere.at, making software that helps people find the job of their dreams.