Voglio mostrare alcune icone personalizzate in un tema che non ne ha di predefinite. Funziona generalmente bene, ma non riesco a usare currentColor per il riempimento.
Quindi questo funziona:
&::before {content: svg-uri('<svg fill="red" ...
Ma questo no, assume semplicemente il colore nero:
&::before {content: svg-uri('<svg fill="currentColor" ...
Qualcuno ha già fatto qualcosa del genere? Non sono sicuro di cosa mi stia sfuggendo..
Per quanto ne so, currentColor non funziona con gli SVG incorporati tramite CSS; purtroppo i colori devono essere hardcodati nell’SVG. Un workaround che ho usato in passato per cambiare i colori sono i filtri CSS, ma anche questi presentano dei limiti.
Ah ok. Grazie @awesomerobot! Sembra che l’unico approccio che supporti anche diversi schemi di colori sia includere le icone nel markup?
Sì, purtroppo! Vorrei che ci fosse un modo migliore con CSS, poiché può essere la soluzione più semplice per aggiungere un’icona decorativa in alcuni casi.