Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (3)

Лучшие ответы пользователя

Все ответы (1)
  • Много SVG иконок в проекте. Как быть?

    @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('&gt;', '>'))
          .pipe(gulp-svgSprite({
            mode: {
              symbol: {
                sprite: "../sprite.svg"
              }
            }
          }))
          .pipe(gulp.dest(config.root + '/assets/img'))
      })
    };

    Теперь svg можно стилизовать и анимировать
    Ответ написан
    Комментировать