How to properly compile svg sprites in gulp?

Question

gulp.js

Good afternoon!
There are svg icons. Single color and multicolor. It is necessary to collect them into a sprite and keep color editing access via css. With single-color everything is clear, but what about multi-color?

gulp.task('svgSpriteBuild', function () {
  return gulp.src('app/img/icon-svg/**/*.svg')
  // minify svg
    .pipe(svgmin({
      js2svg: {
        pretty: true
      }
    }))
    // remove all fill, style and stroke declarations in out shapes
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
        $('[stroke]').removeAttr('stroke');
        $('[style]').removeAttr('style');
      },
      parserOptions: {xmlMode: true}
    }))
    // cheerio plugin create unnecessary string '>', so replace it.
    .pipe(replace('>', '>'))
    // build svg sprite
    .pipe(svgSprite({
      mode: {
        symbol: {
          sprite: "../sprite.svg",
          render: {
            scss: {
              dest:'../../../../dev/sass/_sprite-svg.scss',
              template: 'dev/sass/templates/_sprite_template.scss'
            }
          }
        }
      }
    }))
    .pipe(gulp.dest('app/img/sprite/'));
});

Answer 1

Multicolors generally don't need to change colors via css. But sometimes it happens.
In my icons I use only fill (no stroke). This makes it a little easier to manage.
Removing fill attributes with black color only

$('[fill="#000"]').removeAttr('fill');
$('[fill="#000000"]').removeAttr('fill');

Black is the default color and is not needed, it only interferes with css redefinition.
Everything that is not black is colored, and falls into the sprite as is.
The basic style for filling icons
I think, you know, what is the strength.
Special icons, including multi-color ones, that require non-standard behavior or color management, are edited manually - elements are grouped and separate classes are assigned to them, with the help of which the properties are redefined in css.