Giters

svg-sprite / grunt-svg-sprite

SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

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

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trouble setting up custom templates / Using PNG instead of SVG optionally

6eDesign opened this issue · comments

commented

Hello,

This is an awesome project you have going here, thanks so much for your hard work. I'm hoping you can point me in the right direction on a requirement I'm trying to accomodate: optionally using PNG sprites instead of SVG.

I have already used grunt-svg2png to automatically convert all SVG's in my spritesheet folder to PNG files after the grunt-svg-sprite task runs. Now, I'm just trying to sort out how I implement a custom template or otherwise tell grunt-svg-sprite to map CSS URL's to the .png file instead of the .svg.

FWIW, I only want to do this some of the time. I've read this issue #29 but your proposed solution there does not appear to be working.

Here is the template I'm trying to include:

{{#svg}}{{#selector}}.{{expression}}{{^last}},
{{/last}}{{/selector}} {
background-position: {{position}};
background-repeat: no-repeat;
background-image: url({{#png}}{{{sprite}}}{{/png}});
background-image: linear-gradient(transparent, transparent), url({{{sprite}}});
}
{{/svg}}

From the base directory (where Gruntfile is located), this file is located in sprites/templates/email.css. I have tried including this like so (as suggested, if I'm reading it correctly, in that other issue):

render: {
css: {
template: 'sprites/templates/email.css'
}
}

FWIW, I did figure out how I could manipulate the color/fill of the SVG using the post transformation on the sprite (which I thought would be the harder of the two issues I initially encountered). In any case, I'm left with this one now and very sorry to bug you but hopefully you can help.

Thanks again.

commented

Also, fwiw I've defined the png function in the variables object.

commented

Hey @6eDesign,

first of all sorry for not responding earlier! I must have overseen your issue somehow and just "found" it when checking the repo. I'll do my best to help you with this one (if it's still relevant‽).

Could you please post your complete configuration object so that I can get an overview? Thanks!

Cheers,
Joschi

commented

@6eDesign Any updates on this one?

commented

@6eDesign As there hasn't been any activity on this for quite a while, I will close this for now. Please feel free to let me know if you've still got problems with this.