Modifying destination and filename of gulp-svg-sprite

Question

I need to change the directory that the sprite files are compiled to.

I'm just trying to wrap my head around gulp-svg-sprite for the first time. The goal is to have the scss file included in my sass directory, and then compiled with the rest of my partials - this part works fine. However, the generated svg directory is also put into the sass directory, so I end up with:

- theme
-- sass
---- _sprites.scss
---- svg
------ sprite.css-58jkdf8js.svg
-- css
---- styles.css

When I actually need this:

- theme
-- sass
---- _sprites.scss    
-- css
---- styles.css
---- svg
------ sprite.css-58jkdf8js.svg

Of course, the compile stylesheet has background: url(svg/sprite.css-58adlksjf.svg);

How can I make that sprite directory get compiled under /css instead of /sass?

This is the relevant part of gulpfile.js:

gulp.task('svg', function() {

  config                  = {
    mode                : {
        css             : {     // Activate the «css» mode
            render      : {
              scss      : true  // Activate CSS output (with default options)
            },
            dest        : './',            
            cssFile     : "_sprite.scss"
        },
        symbol          : {
            dest        : '../css/'
        }
    }
};

  gulp.src('src/svg/*.svg')
    .pipe(svgSprite(config))
    .pipe(gulp.dest('sass'));
})

I only added in the symbol mode because I was hoping I could just make another copy there, but it just stores it as sprite.symbol.svg which is not what the CSS is referencing.

I'm thinking an alternative is to forget about sass for the svg stuff, compile it to /css and then include another stylesheet. However, that means I would have to include it before the main stylesheet (which right now seems ok, but I haven't thought that part through yet).

Thanks!

score 5 · Answer 1 · answered Jun 10 '15 at 13:50

I understand it might be too late but my solution was something like this:

gulp.task('svg', function() {
    var config = {
        dest : '.',
        mode : {
             css : {
                 dest : '.',
                 sprite : 'css/svg/sprite.svg',
                 render : {
                     css : {dest : 'css/sprite.css'},
                     scss : {
                         dest : './sass/_sprite.scss'
                     }
                 },
             }
         }
     };
 gulp.src('src/svg/*.svg')
     .pipe(svgSprite(config))
     .pipe(gulp.dest('.'));
})

I prefer to specify

  config.dest : '.'

even it's default, and also to leave

gulp.dest('.')

and handle the folder from config.

score 4 · Answer 2 · answered Aug 01 '15 at 11:01

It's probably too late for your problem, but in the meantime there's an extra section about output destinations in the svg-sprite docs (because it's definitely not trivial). An important thing to understand is that the several dest options work relative to each other (as long as you don't use absolute paths).

config.dest specifies a main output directory used as the base for all output modes.
config.<mode>.dest is relative to config.dest and is used as main output destination for the current mode.
config.<mode>.render.<format>.dest (if given) is again relative to config.<mode>.dest and is used as output path and file name for the specified <type> files. It defaults to "sprite.<format>".
config.<mode>.sprite specifies the name and location of the sprite relative to config.<mode>.dest.

So by default the two CSS sprite modes "css" and "view" will render their stylesheets to

config.dest + config.<mode>.dest + "sprite.<format>"

while the SVG sprite itself will be created at

config.dest + config.<mode>.dest + config.<mode>.sprite

The relative path used for referencing the sprite from within the stylesheet will be derived automatically from these two locations.

Now, when you use the Sass output format, you introduce a compilation step that svg-sprite has no control over. The only thing svg-sprite knows is that your final compiled CSS is supposed to be found at config.dest + config.<mode>.dest + "sprite.<format>" (or whatever you configured for config.<mode>.render.css.dest in particular). You just need to ensure that your Sass compilation result really lands there an you will be all set.

Having said all that, in your particular situation, your configuration should look like this (off the top of my head):

var config                  = {
    "dest"                  : "theme",
    "mode"                  : {
        "css"               : {
            "render"        : {
                "scss"      : {
                    "dest"  : "../sass/_sprites.scss"
                }
            }
        }
    }
}

I hope this didn't only help solving your particular problem but also clear things up a little in general. You might also always consider using the online configuration kickstarter to get off the ground quickly.

How do I set my custom mustache template? It's fairly useless without this possibility. — actimel, Jan 20 '16 at 16:38
@actimel The custom template can be set via `mode.css.render.scss.template` (for the example above). Please find all information about [rendering configurations in the docs](https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#rendering-configurations). You might also be interested in the [online configurator](http://jkphl.github.io/svg-sprite) to ease up configuration. — Joschi Kuphal, Jan 20 '16 at 21:09
Well the documentation is so hard to read that i didn't find this option. Thank you. — actimel, Jan 21 '16 at 10:41

Modifying destination and filename of gulp-svg-sprite

2 Answers2

Linked