UnluckySerivelha
@UnluckySerivelha

Почему gulp-svg-sprite удаляет атрибут stroke-width?

Испольльзую https://www.npmjs.com/package/gulp-svg-sprite для создания символьного svg-спрайта.
Есть иконки с разными stroke-width, которые затем нужно стилизовать через css. Для этого убираю атрибут stroke из svg, оставляя stroke-width.
Но при этом в спрайте stroke-width также исчезает.
Например, исходный svg:
<svg width="35" height="33" viewBox="0 0 35 33" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="14" height="14" rx="2" stroke-width="2"/>
<rect x="20" y="1" width="14" height="14" rx="2" stroke-width="2"/>
<rect x="20" y="18" width="14" height="14" rx="2" stroke-width="2"/>
<rect x="1" y="18" width="14" height="14" rx="2" stroke-width="2"/>
</svg>

И получившийся sybmol:
<symbol viewBox="0 0 35 33" id="icon-products-view-2" xmlns="http://www.w3.org/2000/svg">
	<rect x="1" y="1" width="14" height="14" rx="2" />
	<rect x="20" y="1" width="14" height="14" rx="2" />
	<rect x="20" y="18" width="14" height="14" rx="2" />
	<rect x="1" y="18" width="14" height="14" rx="2" />
</symbol>

В чем может быть дело? Никакой опции для этого не нашел, увы.
  • Вопрос задан
  • 248 просмотров
Пригласить эксперта
Ответы на вопрос 1
@berdnikovdim
Привет!
Я нашел такое решение

gulp
    .src(`${config.src.iconsMulti}/*.svg`)
    .pipe(
      svgSprite({
        mode: {
          symbol: {
            sprite: '../sprites/sprite-multi.svg',
          },
        },
        shape: {
          transform: [
            {
              svgo: {
                plugins: [
                  {
                    removeUselessStrokeAndFill: false,
                  },
                ],
              },
            },
          ],
        },
      }),
    )
    .pipe(gulp.dest(config.dest.images));


Ставишь настройку removeUselessStrokeAndFill: false. После этого stroke-width не будет удаляться, если нету атрибут stroke
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы