Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Multiple SVG symbol spritesheet builder with gulp-svg-sprite
// ------------------------
// Build SVG symbol sprites
// ------------------------
// Each directory matching assets/icons/sprite-* may contain individual SVG files,
// and will be turned into a SVG symbol spritesheet.
var gulp = require('gulp');
var path = require('path');
var svgSprite = require('gulp-svg-sprite');
gulp.task('build-svg', function() {
var svgDest = 'public/sprite';
return glob('assets/icons/sprite-*', function(err, dirs) {
dirs.forEach(function(dir) {
gulp.src( path.join(dir, '*.svg') )
.pipe( svgSprite(makeSvgSpriteOptions(dir)) )
.pipe( size({ showFiles: true, title: svgDest }) )
.pipe( gulp.dest(svgDest) )
})
});
/**
* Make a svg-sprite configuration object for a symbol sprite with a custom file name
*/
function makeSvgSpriteOptions(dirPath) {
return {
mode: {
symbol: {
dest: '.',
sprite: path.basename(dirPath).replace('sprite-', '') + '.svg';
}
},
shape: {
id: {separator: '-'},
transform: ['svgo']
}
};
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment