Итак, символьный спрайт - твой случай
В коде html будет:
<svg><use/ xlink:href='path/to/sprite.svg#icon-name'><svg>
В коде спрайта нужны символы, которые подставляются по id.
Вот пример куска спрайта, просто чтоб ты понял как это работает
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol fill="none" viewBox="0 0 18 18" id="archive" xmlns="http://www.w3.org/2000/svg"><path d="M9 0v10.42m0 0L6.143 7.676M9 10.42l2.857-2.742M6 5H4.5L1 12m0 0v5h16v-5M1 12h4a1 1 0 011 1 1 1 0 001 1h4a1 1 0 001-1 1 1 0 011-1h4m0 0l-3.5-7H12"/></symbol>
...
Ну и вместо use подставляется разметка символа, связанная по id.
Так ты сможешь контролировать svg и через css и через js. И все они будут лежать в одном спрайте.
Ну и естественно, процесс компиляции иконок в спрайт - я юзаю через gulp.
const gulp = require('gulp'),
cheerio = require('gulp-cheerio'),
svgmin = require('gulp-svgmin'),
replace = require('gulp-replace'),
util = require('gulp-util'),
notify = require('gulp-notify'),
svgSprite = require('gulp-svg-sprite'),
path = require('path');
let dest = path.join('src', 'assets', 'icons');
let svgConfig = {
mode: {
symbol:{
sprite: "../sprite.svg"
}
}
};
gulp.task('sprite', function() {
gulp.src("**/*.svg", {cwd: path.join(dest, 'exported')})
.pipe(svgSprite(svgConfig))
.pipe(cheerio({
run: function ($) {
$('[stroke]').removeAttr('stroke');
$('[viewBox]').attr('viewBox', '0 0 18 18');
return
},
parserOptions: {xmlMode: true}
}))
.pipe(replace('>', '>'))
.on('error', function(err) {
util.log(err);
})
.on('error', notify.onError('sprite compiling error!'))
.pipe(gulp.dest(dest))
});
path src и dest а также поиконочную обработку через cheerio уже подгоняешь под себя
Простой