Configuration kickstarter

This configurator lets you create a custom svg-sprite configuration in seconds. Scroll down to see the result as JSON, Node.js project, Gruntfile or Gulpfile.

JSON Node.js
'use strict';

var SVGSpriter    = require('svg-sprite'),
path              = require('path'),
mkdirp            = require('mkdirp'),
fs                = require('fs'),
config            = $$config$$,
spriter           = new SVGSpriter(config);

// Register some SVG files with the spriter
var file          = 'path/to/example.svg'; // <-- Replace with your local file path
spriter.add(path.resolve(file), file, fs.readFileSync(path.resolve(file), {encoding: 'utf-8'}));
// ...

// Compile the sprite
spriter.compile(function(error, result, cssData) {

    // Run through all configured output modes
    for (var mode in result) {

        // Run through all created resources and write them to disk
        for (var type in result[mode]) {
            mkdirp.sync(path.dirname(result[mode][type].path));
            fs.writeFileSync(result[mode][type].path, result[mode][type].contents);
        }
    }
});
Gruntfile
'use strict';

var baseDir  = 'svg/base/dir',   // <-- Set to your SVG base directory
svgGlob      = '**/*.svg',       // <-- Glob to match your SVG files
outDir       = 'output/dir',     // <-- Main output directory
config       = $$config$$;

module.exports = function(grunt) {

    // Project configuration
    grunt.initConfig({

        // svg-sprite configuration
        svg_sprite        : {
            dist          : {
                expand    : true,
                cwd       : baseDir,
                src       : [svgGlob],
                dest      : outDir,
                options   : config
            }
        }
    });

    // These plugins provide necessary tasks
    grunt.loadNpmTasks('grunt-svg-sprite');

    // By default, compile the sprite(s)
    grunt.registerTask('default', ['svg_sprite']);
};
Gulpfile
'use strict';

var gulp     = require('gulp'),
svgSprite    = require('gulp-svg-sprite'),
plumber      = require('gulp-plumber'),
baseDir      = 'svg/base/dir',   // <-- Set to your SVG base directory
svgGlob      = '**/*.svg',       // <-- Glob to match your SVG files
outDir       = 'output/dir',     // <-- Main output directory
config       = $$config$$;

gulp.task('svgsprite', function() {
    return gulp.src(svgGlob, {cwd: baseDir})
        .pipe(plumber())
        .pipe(svgSprite(config)).on('error', function(error){ console.log(error); })
        .pipe(gulp.dest(outDir))
});