Added color to mixin & sprite (support for variables in styles)

Hey, first of all thanks for the great plugin!

I missed the color prop in the mixin, so I added the fill prop in the formatter files & icon.scss. Are there any plans to integrate the color, size prop to the scss/less in the future?

Thats what I’ve done, it works perfectly for me:

scss-formatter.js: svg.setAttribute('fill', '%fill%');

styles.scss:

@mixin sprite($name, $fill: #000) {
$sprite: str-replace(map-get($sprites, $name),'%25fill%25',$fill);
background: url($sprite) center no-repeat;
}
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);
    @if $index {
      @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }
    @return $string;
}

I only changed the scss cause I only use scss in my proj. Maybe I will integrate the size in the sprite mixin as well.

BR Tillmann

[cascornelissen]

@TillmannD, great to hear! I’m hoping to test it some more this evening and will release a version containing this feature this weekend if I can find the time.

[cascornelissen]

Hey @TillmannD, if you want (and have the time) you can check out the progress by installing the plugin from the vars branch:

npm install --save-dev cascornelissen/svg-spritemap-webpack-plugin#vars

The feature feels complete to me, the documentation has been updated and I’ve written some basic tests. I’ll be testing it on some projects myself in the next week or so and will release it when I’m sure everything works correctly.

If you (or anyone else) has feedback on this feature I’d be glad to receive it in this thread ❤️