Why are SVG icons not rendered from a sprite in production?

Question

Web development

Good afternoon.
There is a task SVG sprite and it works fine, but when building the project for production, the icons are not displayed

gulp.task('Scleansprite', function() {
  return del.sync('app/img/sprite/sprite.svg');
});
gulp.task('svg-spritemade', function() {
  return gulp.src('app/img/icons/svg/**/*.svg')
  .pipe(svgmin({
    js2svg: {
      pretty: true
    }
  }))
  .pipe(cheerio({
    run: function ($) {
      $('[fill]').removeAttr('fill');
      $('[stroke]').removeAttr('stroke');
      $('[style]').removeAttr('style');
    },
    parserOptions: {xmlMode: true}
  }))
  .pipe(replace('>', '>'))
  .pipe(svgSprite({
    mode: {
      symbol: {
        sprite: "../sprite.svg",
        render: {
          sass: {
            dest:'../../../sass/_sprite.sass',
            template: "app/sass/_sprite_template.sass"
          }
        }
      }
    }
  }))
  .pipe(gulp.dest('app/img/sprite/'));
});
gulp.task('svg-sprite', ['Scleansprite', 'svg-spritemade']);

gulp.task('build', ['removedist', 'svg-sprite', 'imagemin', 'sass', 'js'], function() {

  var buildFiles = gulp.src([
    'app/*.html',
  ]).pipe(gulp.dest('dist'));

  var buildAccess = gulp.src([
    '.htaccess',
  ]).pipe(gulp.dest('dist'));

  var buildCss = gulp.src([
    'app/css/main.min.css',
  ]).pipe(gulp.dest('dist/css'));

  var buildJs = gulp.src([
    'app/js/scripts.min.js',
  ]).pipe(gulp.dest('dist/js'));

  var buildSprite = gulp.src([
    'app/img/sprite/sprite.svg',
  ]).pipe(gulp.dest('dist/img/sprite/'));
});

I can't figure out what's wrong

Answer 1

Look at the compiled sprite, they are often crookedly assembled if there is an error in some source svg.