svg-sprite / svg-sprite

SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

Home Page:https://github.com/svg-sprite/svg-sprite

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.