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.