D
D
Dymok2019-10-14 20:39:22
gulp.js
Dymok, 2019-10-14 20:39:22

Why does gulp-svg-sprite remove the stroke-width attribute?

I am using https://www.npmjs.com/package/gulp-svg-sprite to create a character svg sprite.
There are icons with different stroke-widths, which then need to be styled via css. To do this, I remove the stroke attribute from the svg, leaving the stroke-width.
But at the same time, the stroke-width also disappears in the sprite.
For example, the original 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>

And the resulting 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>

What can be wrong? Unfortunately, I didn't find any option for this.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
B
berdnikovdim, 2021-02-23
@berdnikovdim

Hey!
I found such a solution

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));

Set the removeUselessStrokeAndFill: false setting. After that stroke-width will not be removed if there is no stroke attribute

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question