Why do gradients disappear in SVG sprite?

Question

css

I generate an svg sprite in Gulp using gulp-svg-sprites with the standard task:

gulp.task('sprites', function () {
    return gulp.src('app/i/icons/*.svg')
        .pipe(svgSprite())
        .pipe(gulp.dest("app/i"));
});

At the same time, the gradient of the icons flies, which they have when they are individually. All of them are filled with the color of the icons that come first in the file. What could be the reason for this, I'm not strong in svg and I don't even know where to dig.

Answer 1

Due to the fact that your gradient is made through the class. And for different icons, the class names can intersect and, accordingly, overwrite each other. Open svg in notepad and edit class names to be unique.