Quero exibir alguns ícones personalizados em um tema que não possui ícones por padrão. Geralmente funciona bem, mas não consigo usar currentColor para o preenchimento.
Então, isso funciona:
&::before {content: svg-uri('<svg fill="red" ...
Mas isso não funciona, ele simplesmente assume o preto como padrão:
&::before {content: svg-uri('<svg fill="currentColor" ...
Alguém já fez isso antes? Não tenho certeza do que estou deixando de lado..
Até onde sei, currentColor não funcionará com SVGs incorporados via CSS; infelizmente, as cores precisam ser definidas diretamente no SVG. Uma solução alternativa que já utilizei para alterar as cores são filtros CSS, mas esses também têm limitações.
Ah, ok. Obrigado @awesomerobot! Isso parece ser a única abordagem que também suportaria diferentes esquemas de cores: ter os ícones no markup?
Sim, infelizmente! Gostaria que houvesse uma maneira melhor com CSS, pois pode ser o caminho mais fácil para adicionar um ícone decorativo em alguns lugares.