Почему пропадает текст и обводка с svg картинки при сборке в спрайт через gulp?

Question

[Serufim]

В общем у меня есть картинка и при сборке через Gulp с нее пропадает обводка и текст
Вот gulp таск

gulp.task('svgSpriteBuild', function () {
    return gulp.src('img/svg/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        .pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "sprite.svg",
                    render: {
                        scss: {
                            dest:'scss/_svg_sprite-template.scss',
                            template: "scss/_svg_sprite.scss"
                        }
                    }
                }
            }
        }))
        .pipe(gulp.dest('img/svg'));
});

Comments

[Moskus]

Попробуйте https://github.com/jkphl/gulp-svg-sprite

Answer 1

[yakupov112]

отключите пайп

// minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))

Comments

[Serufim]

Не помогло(((

[yakupov112]

тогда

.pipe(svgSprite({
            mode: {
                symbol: {
                    sprite: "sprite.svg",
                    render: {
                        scss: {
                            dest:'scss/_svg_sprite-template.scss',
                            template: "scss/_svg_sprite.scss"
                        }
                    }
                }
            }
        }))

[Serufim]

yakupov112, А как тогда спрайт собрать? Я же получается удалю главный пайп который за сборку отвечает

[yakupov112]

gulp.task('svgSpriteBuild', function () {
    return gulp.src('img/svg/*.svg')
    // minify svg
        .pipe(svgmin({
            js2svg: {
                pretty: true
            }
        }))
        .pipe(gulp.dest('img/svg'));
});

[Serufim]

yakupov112, Вы понимаете, что ничего даже не соберется потому что там просто один пайп на минификацию svg и нет никакого пайпа на сборку спрайта???

Answer 2

[Sergiu Mitu]

скорее всего дело в самом файле, какой-то он кривой.
Использую аналогичный таск уже года полтора-два года, и никаких проблем небыло.

// Task for svg-sprite
gulp.task('svg-sprite', function () {
	return gulp.src(paths.src.svgIcons)
		.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"
				}
			}
		}))
		.pipe(gulp.dest(paths.src.imgFolder));
});

Answer 3

[zpawn]

Скорее всего дело в самом svg файле, а именно с шрифтом. Я думаю если ты переведешь шрифт в кривые, то все будет норм при создании спрайта.