Notícias

Incorporando ícones SVG no CSS

by Auto News Bot 18 de setembro de 2023 183

Felizmente, o recurso de máscara CSS nos permite transformar o SVG em uma máscara e alterar sua cor de fundo, concedendo a capacidade de alterar a cor do ícone SVG.Agora, tudo o que precisamos fazer é substituir a propriedade de imagem em segundo plano por máscara e adicionar fundo: currentColor;Para garantir que a cor do ícone SVG mude com base na cor dos pais.Aqui está o código -fonte SVG:
Podemos converter esse ícone na versão codificada por URL usando o codificador de URL para SVG.Na minha opinião, se você tiver menos de 100 ícones SVG em uma única página, o impacto do desempenho é mínimo e aceitável.Todos sabemos que provavelmente não baseiam64 SVG, mas usar o codificação de URL parece ser uma alternativa viável.

Fonte: https://peiwen.lu/post/svg-in-css/