Много SVG иконок в проекте. Как быть?

Question

[ole92]

Всем привет. Помогите пожалуйста советом.

В проекте очень много svg иконок, в будущем будут добавляться новые иконки. Иконки в активном состоянии меняют цвет.

Как лучше сделать? Если генерировать шрифтом, то как потом добавлять новые? Простым кодом добавлять как то сложно и много кода. Кто как делает? Какие сервисы используйте?

Comments

[sim3x]

Иконки требуются одноцветные?

В чем проблема сделать один большой свг со всеми иконками?

[ole92]

Одноцветные, но должны менять цвет в активном состоянии. Как потом управлять этим свг?

[Дмитрий Локшин]

В любом сборщике можно генерировать спрайты, вот, например, у меня в gulp для генерации svg спрайта используется вот такой таск:

gulp.task("svg-sprite", function () {
  return gulp.src("app/img/icons/svg/*.svg")
  .pipe(svgmin())
  .pipe(cheerio({
    run: function ($) {
      $("[fill]").removeAttr("fill");
      $("[stroke]").removeAttr("stroke");
      $("[style]").removeAttr("style");
      $("[color]").removeAttr("color");
    },
    parserOptions: {xmlMode: true}
  }))
  .pipe(replace(">", ">"))
  .pipe(svgstore({
    inlineSvg: true
  }))
  .pipe(rename("svg-sprite.svg"))
  .pipe(gulp.dest("app/img/"));
});

Он автоматически генерит svg спрайт при добавлении в папку icons любого svg изображения, а затем я с легкостью использую его, при этом могу управлять цветом и размером.

[ole92]

Дмитрий Локшин, а в html какой код?

[Дмитрий Локшин]

ole92,

<svg class="svg" width="29" height="33">
   <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/svg-sprite.svg#id_svg_иконки"></use>
</svg>

Затем в css можно управлять цветом через color, а также размером, через height и width, либо через font-size.

Answer 1

[Anton Filippov]

Используйте 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)

Comments

[Dima Polos]

Спасибо, сам мучался, как это сделать.

[ole92]

Хороший вариант, но дизайнер прислал все иконки по отдельности, и каждому прописывать id будет долго. Плюс в будущем будут еще иконки. Не совсем удобно, проще все таки через galp или скрипт менять, как выше писали.

Что скажете про такой вариант:
https://gist.github.com/ArchiTawer/f4d7173f22c5369...

[Anton Filippov]

ole92, так я тоже делал :) но как по мне вариант с символами организованнее, и в дальнейшем будет проще добавлять свгшки в файл icons.svg, чем забивать html большим количеством dom элементов.

Сколько у вас там иконок то?

[ole92]

сейчас около 30, но будет еще столько же, если не больше)

[Anton Filippov]

ole92, да нормас за 10 минут сделаете) я думал там несколько сотен

Answer 2

[vladislavpivovarov]

Сотни 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 можно стилизовать и анимировать