Ich möchte in einem Theme, das standardmäßig keine Icons enthält, einige benutzerdefinierte Icons anzeigen. Im Allgemeinen funktioniert das gut, aber ich kann currentColor für die Füllung nicht verwenden.
Also funktioniert dies:
&::before {content: svg-uri('<svg fill="red" ...
Aber dies nicht; es wird einfach standardmäßig schwarz:
&::before {content: svg-uri('<svg fill="currentColor" ...
Hat das schon jemand gemacht? Ich bin mir nicht sicher, was mir fehlt..
Soweit ich weiß, funktioniert currentColor bei in CSS eingebetteten SVGs leider nicht; die Farben müssen im SVG hardcodiert werden. Ein Workaround, den ich zuvor verwendet habe, um die Farben zu ändern, sind CSS-Filter, doch auch diese haben ihre Nachteile.
Ah, okay. Danke @awesomerobot! Das klingt nach dem einzigen Ansatz, der auch verschiedene Farbschemata unterstützt, nämlich die Icons im Markup zu haben?
Ja, leider! Ich wünschte, es gäbe eine bessere Möglichkeit mit CSS, da dies in manchen Fällen der einfachere Weg ist, ein dekoratives Icon hinzuzufügen.