search

cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
207 stars 49 forks source link

Add `mask` support #212

Open xavierfoucrier opened 8 months ago

xavierfoucrier commented 8 months ago

Hello @cascornelissen 👋

Great plugin, I am using it in many scss projects.

One thing I noticed is that it would be convenient, in some situations, to output the mask attribute instead of background. This could be implemented by using a using a different mixin like mask(..) or adding parameters to the current sprite one.

Thanks a lot!

I know that you can tweak the svg by passing custom variables, but mask is usefull especially when you have a to use mask-size: 100% 100%;, because width/height/viewbox are removed from the data:image output.

PS: my mistake, you can tag this as "feature request" 👌

cascornelissen commented 8 months ago

Hi! Thanks for the feature request, I'm open to reviewing and merging a PR to land this feature.

We do a similar thing already when it comes to background-size or width + height in the SCSS mixin (see below) so having an extra argument (e.g. $property that defaults to background but can be set to mask) would work I guess?

https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/c0f2d3d7b5657505b03ff81abe1e50bfa0716e36/lib/templates/styles.scss#L59-L67

xavierfoucrier commented 8 months ago

This should be great!

Work overflow on my side right now, but I can find time during my vacations to work on this 🏂