Option to use px for positioning?

[isGabe]

Is there a reason that ems are used for positioning, and is there an option to use px instead? I like ems for some things, but positioning sprites is not one of them.

[isGabe]

I see that font size it set to 10px for .icon by default, which makes for more sane em values. But that means anything I use this on now has a tiny 10px font size, which I have to address with extra HTML elements and/or CSS. This is a deal breaker for me.

[mikestreety]

Using em for means the svg scales with the font size change - I wrote a blog post about it here:

https://www.liquidlight.co.uk/blog/article/working-with-svgs-in-sprites/

@elivz has created a pull request which makes this number configurable (once merged). You can also use templates to get the desired output if needed

[isGabe]

I can see the potential value in scaling SVGs with font size, but in the end I think it makes too assumptions. The fact that proper positioning and scaling relies on setting font size to 10px is enough for me to bail until I have time to figure out how the templating works, which is a shame. I don't see any comparable Grunt things for SVG sprites at the moment.

[mikestreety]

Do you use sass for your styling? Or do you use CSS?

[danieldiekmeier]

There isn't really much to "figure out", template wise.

You can just edit the standard template here: https://github.com/shakyShane/gulp-svg-sprites/blob/master/tmpl/sprite.css to fit your needs. (Change variables like relWidth to just width, replace em with pixels, etc)

Then you have to pass the location of your file, as described here: https://github.com/shakyShane/gulp-svg-sprites#advanced-custom-templates

[isGabe]

@mikestreety I use Sass (.scss).

@danieldiekmeier thanks for that. Somehow I had it in my head that the templating bits were more complicated than that, and I haven't had time to look back into this, but I will soon. And maybe I'm being obtuse about the ems, but I don't like messing around with the font size to get positioning to work right. that's the kind of thing that a Sass function can handle pretty well.

[mikestreety]

Using the templates, I output a massive map of the px dimensions and background positions then call those using mixins. The mixin then converts to em using a function.

I wrote up my process into a blog post and wapped the code up in the Github repo. Give me a shout if I can help at all!

[dapacreative]

@mikestreety - Thanks for the tutorial, very helpful. I did notice on mine that having the padding set to '5' in the gulpfile seemed to offset the positioning of the icons. Is there any way to correct this or is there something I'm doing wrong. Here's the page I'm working on:

http://heads-up-coaches.html.banyancomm.com/theme-selector.html

[mikestreety]

Hi Dan

,I have a sass Mixin that subtracts 5 from the px before converting to ems.

[dapacreative]

@mikestreety - Can you post and example of that mixin. The file in your demo doesn't seem to have it. Thanks!

[mikestreety]

Very sorry - thought it had it in! Will dig it out when I have the code in front of me tomorrow.

It would be in the sprite mixin though - when doing the background positioning

[dapacreative]

No worries. I actually found the location and just setup a variable called 'iconPadding'. Final code is below:

@if $type == all or $type == bg { background-position: mq-px2em(map-get($iconMap, x) - $iconPadding) mq-px2em(map-get($iconMap, y) - $iconPadding); }

[mikestreety]

Yeah thats the one - putting in a variable is probably a good call

// Outputs background position in em
@if $type == all or $type == bg {
    background-position: mq-px2em(map-get($iconMap, x) - 5) mq-px2em(map-get($iconMap, y) - 5);
}

Don't foget to also change the IE one as well:

@if $type == all or $type == bg {
    background-position: (map-get($iconMap, x) - 5) (map-get($iconMap, y) - 5);
}

[growdigital]

@danieldiekmeier thanks for heads up about templates. I can get .pipe(svgSprite(config)) to work fine but I have a load of options set, and I don't know the syntax for including the config variable in amongst:

.pipe(svgSprite({
    cssFile: "sprite.css",
    pngPath: "../img/%f",
…

This is probably more of a gulp question!

[danieldiekmeier]

@growdigital config is a javascript object, but saved into a variable, and in your snippet you use an inline object. You can't do both. You could "merge" the two objects together, see here for more information on that.

[growdigital]

@danieldiekmeier thank you, much appreciated :)