SVG Sprites

is a Gulp plugin wrapping around svg-sprite which takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types:

• Traditional CSS sprites for use as background images,
• CSS sprites with pre-defined view elements, useful for foreground images as well,
• inline sprites using the defs element,
• inline sprites using the symbol element
• and SVG stacks.

First, install gulp-svg-sprite as a development dependency:

Then, add it to your gulpfile.js:

        var gulp       = require('gulp'),
        svgSprite       = require('gulp-svg-sprite');

        gulp.src('path/to/assets/*.svg')
          .pipe(svgSprite( /* ... Insert your configuration here ... */ ))
          .pipe(gulp.dest('out'));