Como colocar gradiente em ícones finos?

Dev
4

Olá,

Pelo que li em Gradients in SVG - SVG | MDN, você precisa adicionar <linearGradient> ao SVG.

Outros recursos:

O que você pode fazer é criar um SVG oculto em seu tema/componente para definir seus gradientes:

<svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;">
  <linearGradient id="my-gradient-1" x2="0" y2="1">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
  </linearGradient>
  
  <linearGradient id="my-gradient-2">
    <stop offset="0%" stop-color="var(--color-stop-1)" />
    <stop offset="50%" stop-color="var(--color-stop-2)" />
    <stop offset="100%" stop-color="var(--color-stop-3)" />
  </linearGradient>

  <!-- Define o gradiente específico conforme necessário com um ID exclusivo -->
</svg>

Em seguida, em seu CSS, você define a cor e segmenta quais elementos SVG você deseja preencher (fill):

/* define a cor dos gradientes */
#my-gradient-1 {
    --color-stop-1: #a770ef;
    --color-stop-2: #eda58b;
}

#my-gradient-2 {
    --color-stop-1: #2980b9;
    --color-stop-2: #6dd5fa;
    --color-stop-3: #ffffff;
}

.svg-icon, .svg-icon-title {
    /* segmenta todos os ícones svg */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* segmenta apenas o ícone de chat */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Observação: o segundo valor de fill é uma cor de fallback.

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

Não testei extensivamente; este é um exemplo de como você pode personalizar.
Sinta-se à vontade para consultar a documentação para criar gradientes mais complexos.

Espero que ajude!

2 curtidas