Je souhaite afficher des icônes personnalisées dans un thème qui n’en propose pas par défaut. Cela fonctionne généralement bien, mais je n’arrive pas à utiliser currentColor pour l’attribut fill.
Ainsi, cela fonctionne :
&::before {content: svg-uri('<svg fill="red" ...
Mais cela ne fonctionne pas, l’icône reste noire par défaut :
&::before {content: svg-uri('<svg fill="currentColor" ...
Est-ce que quelqu’un a déjà fait cela ? Je ne suis pas sûr de ce qui me manque.
À ma connaissance, currentColor ne fonctionnera pas avec les SVG intégrés via CSS ; malheureusement, les couleurs doivent être codées en dur dans le SVG. Une solution de contournement que j’ai utilisée auparavant pour modifier les couleurs consiste à utiliser des filtres CSS, mais ceux-ci présentent également des inconvénients.
Ah, d’accord. Merci @awesomerobot ! Cela semble être la seule approche qui permettrait également de prendre en charge différents schémas de couleurs : intégrer les icônes directement dans le code HTML ?
Oui, malheureusement ! Je voudrais qu’il y ait une meilleure solution avec CSS, car c’est parfois le moyen le plus simple d’ajouter une icône décorative à certains endroits.