Hola,
Según lo que leí en Gradients in SVG - SVG | MDN, debes agregar <linearGradient> al SVG.
Otros recursos:
Lo que puedes hacer es crear un SVG oculto en tu tema/componente para definir tus 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 specific gradient as needed with a unique ID -->
</svg>
Luego, en tu CSS, defines el color y apuntas a qué elementos SVG quieres aplicar fill:
/* defines gradients color */
#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 {
/* targets all svg icons */
fill: url(#my-gradient-1) var(--header_primary-low-mid);
/* targets only chat icon */
&.d-icon-d-chat {
fill: url(#my-gradient-2) var(--header_primary-low-mid);
}
}
Nota: el segundo valor de fill es un color de reserva.
No he probado exhaustivamente; este es un ejemplo de cómo puedes personalizar.
Siéntete libre de consultar la documentación para crear gradientes más complejos.
¡Espero que esto ayude!