Уже есть настроенная сборка спрайтов. Но проблема в том что в иконки встроены стили в теге stylе. Название классов в разных иконках может быть одинаковым. Поэтому как только разные иконки оказываются в одном спрайте то стили переопределяются.
gulp.task('svg-sprite', function () {
return gulp.src(path.svgSprite + '**/*.svg')
.pipe(svgspritesheet(
{
cssPathNoSvg: '../images/svg-sprite/svg-sprite.png',
cssPathSvg: '../images/svg-sprite/svg-sprite.svg',
padding: 15,
pixelBase: 16,
// positioning: 'packed',
templateSrc: path.styles + 'templates/_svg-sprite-template.styl',
templateDest: path.styles + '_svg-sprite.styl',
units: 'em'
}
))
.pipe(svgmin())
.pipe(replace('>', '>'))
.pipe(gulp.dest(path.dist.svgSprite + 'svg-sprite.svg'))
.pipe(svg2png())
.pipe(gulp.dest(path.dist.svgSprite + 'svg-sprite.png'))
.pipe(browserSync.stream());
});
