Answer the question
In order to leave comments, you need to log in
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>
<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>
Answer the question
In order to leave comments, you need to log in
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));
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question