Много SVG иконок в проекте. Как быть?
Используйте svg <use>
В двух словах - в одном свг вы заносите все свои свг иконки в виде "символов", и даёте каждой свой id, и потом просто через атрибут вставляете иконку через айди
https://css-tricks.com/svg-symbol-good-choice-icons/ , я так и делал в подобной ситуации.
вот ещё, но чуть другое:
taye.me/blog/svg/a-guide-to-svg-use-elements (en)
https://habrahabr.ru/post/230443/ (ru)
Сотни svg и все в одном скромном файлике. Как?Запускаете галп и он все svg пилит в спрайт. Используется он проще простого - <svg><use xlink:href="sprite.svg#id_иконки"></use></svg>какие галп плагины нужны - github:gulpjs/gulp#4.0gulp-cheeriogulp-svg-spritegulp-svgmingulp-replacegulp.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('&gt;', '>'))
      .pipe(gulp-svgSprite({
        mode: {
          symbol: {
            sprite: "../sprite.svg"
          }
        }
      }))
      .pipe(gulp.dest(config.root + '/assets/img'))
  })
};Теперь svg можно стилизовать и анимировать