Feature request: Add index variable to shape variables for CSS templating
badfeather opened this issue · comments
I like to create CSS background-image
or mask-image
sprites by using a vertical layout and setting the width and height to the icon to 1em
, which allows me to avoid percentage calculations and values for background-position
or mask-position
and instead set them to something like mask-position: 0 -1em;
, which I find much simpler. SASS example:
%icon {
display: inline-block;
vertical-align: middle;
mask-image: url(../img/icon-sprite.svg);
mask-size: 100% auto;
width: 1em;
height: 1em;
mask-repeat: no-repeat;
background-color: currentColor;
}
.icon--one {
@extend %icon;
mask-position: 0 0;
}
.icon--two {
@extend %icon;
mask-position: 0 -1em;
}
.icon--three {
@extend %icon;
mask-position: 0 -2em;
}
In order to do this with the Mustache templates, I'm looking for a way to have access to the index of the shape, which would allow me to do something like the following in the template:
{{#shapes}}{{#selector.shape}}{{expression}}{{/selector.shape}} {
{{^hasCommon}}{{#hasMixin}}@include {{mixinName}};{{/hasMixin}}{{^hasMixin}}@extend %{{commonName}};{{/hasMixin}}
{{/hasCommon}}mask-position: 0 {{#index}}-{{index}}em{{/index}}{{^index}}0{{/index}};
}
{{/shapes}}
Love svg-sprite, BTW! Thank you for making and maintaining it.