S
S
Sergey Burduzha2019-03-08 14:32:23
gulp.js
Sergey Burduzha, 2019-03-08 14:32:23

How to make gulp-svgmin not remove classes from svg?

Hello.
I use a task to create svg sprites.

gulp.task('svg', function () {
  return gulp.src('src/assets/i/svg/inline/*.svg')
    .pipe(cheerio(cleanSvg({
      tags: ["title", "desc"],
      attributes: ["style", "fill*", "clip*", "stroke*"]
    })))
    .pipe(svgmin({
      js2svg: {
        pretty: true
      }
    }))
    .pipe(replace('>', '>'))
    // .pipe(svgSprite({
    // 	mode: {
    // 		symbol: {
    // 			sprite: "../sprite.svg",
    // 		}
    // 	}
    // }))
    .pipe(gulp.dest("build/assets/i/svg/inline/"));
});

At the entrance I have this picture
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<style type="text/css">
  .st0{fill:none;}
</style>
<path class="st0" d="M0,0h48v48H0V0z"/>
<path d="M33.1,17.9L15.2,0l-2.8,2.8l4.8,4.8L6.9,17.9c-1.2,1.2-1.2,3.1,0,4.2l11,11c0.6,0.6,1.4,0.9,2.1,0.9s1.5-0.3,2.1-0.9l11-11
  C34.3,21,34.3,19,33.1,17.9z M10.4,20l9.6-9.6l9.6,9.6H10.4z M38,23c0,0-4,4.3-4,7c0,2.2,1.8,4,4,4s4-1.8,4-4C42,27.3,38,23,38,23z"
  />
<rect y="40" width="48" height="3"/>
</svg>

After working out gulp-svgmin I get
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path d="M0 0h48v48H0V0z" fill="none"/>
    <path d="M33.1 17.9L15.2 0l-2.8 2.8 4.8 4.8L6.9 17.9c-1.2 1.2-1.2 3.1 0 4.2l11 11c.6.6 1.4.9 2.1.9s1.5-.3 2.1-.9l11-11c1.2-1.1 1.2-3.1 0-4.2zM10.4 20l9.6-9.6 9.6 9.6H10.4zM38 23s-4 4.3-4 7c0 2.2 1.8 4 4 4s4-1.8 4-4c0-2.7-4-7-4-7zM0 40h48v3H0z"/>
</svg>

Not a bad result. Only before the plugin was worked out, the paths had classes, and after that they are not. How to style from css now?
I did not find an option for this plugin to not delete classes.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Burduzha, 2019-03-19
@serii81

Solved the problem in the following way.
At the initial stage, in the src folder for the icons that need to be added to the sprite, I delete the style attribute along with the content.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question