Comment mettre un dégradé sur des icônes fines ?

Dev
4

Salut,

D’après ce que j’ai lu dans Gradients in SVG - SVG | MDN, vous devez ajouter <linearGradient> au SVG.

Autres ressources :

Ce que vous pouvez faire, c’est créer un SVG caché dans votre thème/composant pour définir vos dégradés :

<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>

  <!-- Définir le dégradé spécifique selon les besoins avec un ID unique -->
</svg>

Ensuite, dans votre CSS, vous définissez la couleur et vous ciblez les éléments SVG que vous souhaitez remplir (fill) :

/* définit la couleur des dégradés */
#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 {
    /* cible toutes les icônes svg */
    fill: url(#my-gradient-1) var(--header_primary-low-mid);
    
    /* cible uniquement l'icône de chat */
    &.d-icon-d-chat {
        fill: url(#my-gradient-2) var(--header_primary-low-mid);
    }
}

Remarque : la deuxième valeur de fill est une couleur de secours.

NVIDIA_Share_sReu1lscRl
NVIDIA_Share_sReu1lscRl1390×450 42.6 KB

Je n’ai pas testé de manière exhaustive ; ceci est un exemple de la façon dont vous pouvez personnaliser.
N’hésitez pas à consulter la documentation pour créer des dégradés plus complexes.

J’espère que cela vous aidera !

2 « J'aime »