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:
npm install --save-dev gulp-svg-sprite
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'));