svg-sprite/gulp-svg-sprite

Generated paths in scss file are wrong when using custom template

StefNet opened this issue · 1 comments

I am using a mustache template to generate a sass map using the svg sprite task. This works fine apart from the fact that the paths are not generated properly in the scss file. At first I just used hardcoded links to the sprite but now I want to use cache busting and can't do that anymore.

My template looks as follows:

$icons: (
    sprite: (width: {{spriteWidth}}px, height: {{spriteHeight}}px, pngPath: '../img/sprite.png', svgPath: '../{{sprite}}'),
{{#shapes}}     {{base}}: (width: {{width.inner}}px, height: {{height.inner}}px, backgroundX: {{position.absolute.x}}px, backgroundY: {{position.absolute.y}}px),
{{/shapes}});

Now the part that goes wrong is svgPath. This will generate:

svgPath: '../img/sprite.svg'

So it seems its replacing the forward slash with the hex code for a forward slash.
Any idea how to fix this? Or work around it?

jkphl commented

Hi @StefNet, thanks for reporting. First of all, it would be nice if you could mark the code sections in your issue as fenced code blocks so that they are readable. The hexcode problem is not understandable otherwise.

Secondly, what you are experiencing is in fact a feature of Mustache instead of a bug of svg-sprite. You should be able to avoid the substitution by using triple curly braces for {{{svgPath}}}. Please see here for an example.

Cheers, Joschi