liquidlight/sass-gulp-svg-sprite

Code examples of our Gulp, Sass and SVG process

sass-gulp-svg-sprite's Issues

PNG Sprite Fails to Generate

Seems to be an issues with verbose: true as it's generating just a blank png.

.pipe($.svg2png({
  verbose: true
}))

In addition, it seems the png dest is a level to high

scss template doesn't produce valid scss

I have this set up in my gulpfile to export the _sprite.scss file but when the file is processed by postcss i get the error that it isn't valid css.

I checked with the developer for gulp-svg-sprite and it turned out that the mustache template I copied off this repo didn't produce valid scss. I'm not sure if your code is more sophisticated than I'm familiar with but I thought I'd let you know this was happening.

Aside from that, the blogpost was really helpful and explained everything very well so thanks for your work on that!

Here's the error:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: dev/scss/modules/_sprite.scss
Error: (sprite: (width: 147px, height: 129px, pngPath: "../img/sprite.png", svgPath: "../img/sprite.svg"), casicon: (width: 32.88px, height: 22.19px, backgroundX: 0px, backgroundY: 0px), facebook: (width: 10px, height: 22px, backgroundX: -43px, backgroundY: -33px), twitter: (width: 32px, height: 22px, backgroundX: -63px, backgroundY: -65px), twitterHover: (width: 32px, height: 22px, backgroundX: -105px, backgroundY: -97px)) isn't a valid CSS value.
        on line 2 of dev/scss/modules/_sprite.scss
>>     sprite: (width: 147px, height: 129px, pngPath: '../img/sprite.png', svgPat
   ----^

    at options.error (/web_projects/sandbox_homepage/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:271:32)

Here's the _sprite.scss file that's generated:

$icons: (
    sprite: (width: 147px, height: 129px, pngPath: '../assets/img/sprite.png', svgPath: '..../assets/img/sprite.svg'),
    casicon: (width: 32.88px, height: 22.189999999999998px, backgroundX: 0px, backgroundY: 0px),
    facebook: (width: 10px, height: 22px, backgroundX: -43px, backgroundY: -33px),
    twitter: (width: 32px, height: 22px, backgroundX: -63px, backgroundY: -65px),
    twitterHover: (width: 32px, height: 22px, backgroundX: -105px, backgroundY: -97px),
);

Error in plugin ‘gulp-svg-sprite’

When adding a new svg to an existing project I am getting the following error:

File build/sprite/icon—download-purple.svg was added
starting ‘svgSprite’…
File build/sprite/icon—download-purple.svg was changed
‘svgSprite’ error after 193 ms
Error in plugin ‘gulp-svg-sprite’
Message:
Skipping “%s” (%s)

The svg is a direct copy of an existing svg from the project which was previously successfully 'sprited' (Eliminating possibility of corrupt svg). Something else has changed causing this error... Any clues?

I'm using a MAC / Node / NPM

This could be related to:
svg-sprite/gulp-svg-sprite#48

$mq

Hi, you forgot to include _mq.scss.
And it would be better if gulp-sass has been included into the gulpfile.js. Thx.