search

w0rm / gulp-svgstore

Combine svg files into one with symbol elements
https://www.npmjs.com/package/gulp-svgstore
645 stars 33 forks source link

Apply class attribute to symbols #82

Closed oscarotero closed 7 years ago

oscarotero commented 7 years ago

Hi.

I have several svg icons, some are flat, others colorfull. I use the css classes icon-color and icon-flat to distinguish between them and apply custom styles. Example:

<svg class="icon-color">
    <!-- colorfull icon here -->
</svg>

<svg class="icon-flat">
    <!-- flat icon here -->
</svg>

I need to keep these classes in the resulting sprite. Something like this:

<svg>
    <symbol id="icon1" class="icon-color"></symbol>
    <symbol id="icon2" class="icon-flat"></symbol>
</svg>

Is there any way to handle this? It would be great to have an option to keep css classes in the result symbol (or having any way to modify the symbol creation).

Thanks.

w0rm commented 7 years ago

@oscarotero hi, sorry for the late reply.

Generally for flat icons you wouldn't want to style the symbol itself, but rather set the fill attribute on the parent tag and make the used symbol inherit the fill. To make this work you need to remove the fill attribute from everything in the icon https://css-tricks.com/cascading-svg-fill-color/

So you'll need to remove the fill from flat icons and keep it set for the colorfull icons. In order to remove the fill, you can use gulp-cheerio https://github.com/w0rm/gulp-svgstore#transform-svg-sources. Function cheerio(function ($, file) { takes the gulp file object, and you can use it to check the path or the filename to decide if you need to remove the fill.

I hope this was helpful.