Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Add index variable to shape variables for CSS templating #738

Open
badfeather opened this issue Oct 3, 2022 · 0 comments

Comments

@badfeather
Copy link

badfeather commented Oct 3, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant