Sprites

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'));