Как генерировать спрайты svg через gulp?

Question

[Рамиль]

Уже есть настроенная сборка спрайтов. Но проблема в том что в иконки встроены стили в теге 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());
});

Answer 1

[Анатолий Саламатин]

Рекомендую вот этот способ glivera-team.github.io/svg/2016/06/13/svg-sprites-...

Comments

[Рамиль]

У меня примерно такая сборка. Собирается без проблем. Только на выходе иконки получаются не те