Сотни svg и все в одном скромном файлике. Как?
Запускаете галп и он все svg пилит в спрайт. Используется он проще простого - <svg><use xlink:href="sprite.svg#id_иконки"></use></svg>
какие галп плагины нужны - - github:gulpjs/gulp#4.0
- gulp-cheerio
- gulp-svg-sprite
- gulp-svgmin
- gulp-replace
gulp.task('sprite:svg', function() {
return gulp.src('./source/sprite/*.svg')
.pipe(gulp-svgmin({
js2svg: {
pretty: true
}
}))
.pipe(gulp-cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: { xmlMode: true }
}))
.pipe(gulp-replace('>', '>'))
.pipe(gulp-svgSprite({
mode: {
symbol: {
sprite: "../sprite.svg"
}
}
}))
.pipe(gulp.dest(config.root + '/assets/img'))
})
};
Теперь svg можно стилизовать и анимировать 