How to generate svg sprites via gulp?

Question

Web development

There is already a configured assembly of sprites. But the problem is that the styles are embedded in the icons in the style tag. Class names in different icons can be the same. Therefore, as soon as different icons are in the same sprite, the styles are redefined.

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());
});

Answer 1

I recommend this method glivera-team.github.io/svg/2016/06/13/svg-sprites-...