Ícones de bootstrap como variáveis CSS
O uso de fontes de ícones na marcação HTML ainda é muito popular, apesar de suas muitas desvantagens. Usá-los significa que mesmo se você usar apenas um único ícone, ainda precisará carregar o arquivo de fonte e o CSS para todo o conjunto de ícones, o que pode ser uma sobrecarga de desempenho (relativamente) significativa. Muitos sites também carregam fontes de ícones de CDNs de terceiros, que podem ser bloqueadas pelos bloqueadores de conteúdo dos usuários.
Na verdade, CSS Tricks publicou um artigo Inline SVG vs Icon Fonts Cagematch há 12 anos (!) que concluiu que SVGs inline são a melhor escolha para ícones e, desde então, os benefícios de evitar fontes de ícones só cresceram.
Posso ver o apelo de usar fontes de ícones, se você estiver usando Bootstrap Icons, por exemplo.. basta usar marcações como:
Há uma maneira melhor! Em vez de usar fontes de ícones, podemos definir todos os ícones que precisamos como variáveis CSS e então mapeá-los para uma classe CSS – para que possamos usá-los de maneira semelhante às webfonts, mas sem downloads de arquivos extras e outras desvantagens.
Eu lancei Bootstrap Icons como variáveis CSS, um pequeno projeto que expõe Bootstrap Icons como propriedades personalizadas CSS.
Então você tem acesso ao ícone como uma variável CSS como esta:
Cópia
--bi-hearts: url("data:image/svg+xml;utf8,");e uma classe para referenciá-lo:
Cópia
.bi-heart {
mask-image: var(--bi-heart);
}Portanto, sua marcação HTML é idêntica ao uso de fontes de ícones:
Você pode dimensionar o ícone com CSS assim:
Cópia
i class="bi-heart" style="height: 2rem; width: 2rem;">i>O pacote inclui o CSS gerado – com variáveis CSS e nomes de classes referenciando as variáveis CSS como máscaras SVG.
mask-image é compatível sem prefixo em todos os navegadores modernos (Chrome 120, Safari 15.4, Firefox 53 — caniuse). Para ampliar ainda mais o suporte (Safari 4.0+, Opera), você pode usar o Autoprefixer para adicionar automaticamente -webkit-mask-image prefixo (ao lado mask-image). Como isso usa variáveis CSS, as mesmas variáveis são referenciadas de :root sem aumentar muito o tamanho do arquivo. Organizado!
A folha de estilo tem aproximadamente 1,3 MB (~230 KB compactada) e inclui todos os 2.078 ícones. Você pode reduzir o tamanho do arquivo e melhorar o desempenho incluindo apenas o CSS (ou variáveis) dos ícones necessários.
