1
resposta

Perda de contornos com gulp-svg-sprites

Boa tarde,

Estou gerando um sprite de icones que já estão xml minificados e quando gero o sprite ele comprime eles mais ainda a ponto de não aparecerem ou não apresentarem os contornar, existe alguma configuração que eu possa fazer para que isso não aconteça? Ou estou fazendo algo errado?

Tarefa gulp:

gulp.task('sprites', function () {
    return gulp.src(icons)
        .pipe(svgSprite({mode: "symbols"}))
        .pipe(gulp.dest("dist/assets/icon"));
});

sgv antes do sprite:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>

depois do sprite:

<symbol id="alert-octagon" viewBox="0 0 24 24">
    <path d="M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86L7.86 2zM12 8v4M12 16"></path>
</symbol>

Isso está acontecendo com vários ícones, mas não com todos!!! E se eu faço manual o sprite, só copiando o conteúdo completo e trocando as tags svg's por symbol, como orientado no vídeo funciona, só que são muito ícones, gostaria de automatizar.

No aguardo! Obrigada!

1 resposta

Meu chute é que as tags de stroke estão no elemento raiz, no <svg> e aí o plugin se perde na hora de jogar pro <symbol>.

Tenta editar o ícone e passar esses atributos pra um elemento filho (usa um <g> que é mais fácil). E aí tenta fazer o sprite e novo.

Exemplo:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></g>
</svg>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software