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, BSc MA

I’m an experienced front-end developer and lead developer for cross-functional Scrum/Kanban teams. I’ve recently transitioned to engineering management, trying to make everyone on my team an even better developer than myself.

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

I’m currently working as the Head of Front-End Development for karriere.at in Linz, making software that helps people find the job of their dreams.