Como Corrigir Ícones Invertidos Ao Extrair SVG do Font Awesome
Resposta Rápida
Para extrair SVG do Font Awesome, insira o código SVG necessário diretamente no seu arquivo HTML. Isso é particularmente conveniente quando você precisa apenas de alguns ícones dessa biblioteca e prefere economizar tempo. Aqui está um exemplo:
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="camera-retro" class="svg-inline--fa fa-camera-retro fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="..."></path>
</svg>Substitua "..." no elemento <path> pelos dados específicos do caminho SVG, que podem ser encontrados na página do ícone desejado do Font Awesome. Você pode alterar o atributo fill para personalizar a cor do ícone de acordo com o seu projeto. O SVG apresentado dessa forma está pronto para uso posterior: pode ser escalado e estilizado com CSS.
Encontrando Ícones no Repositório Font Awesome
Se você acredita que os detalhes são importantes, os seguintes passos ajudarão você a se aprofundar no processo:
- No repositório FortAwesome/Font-Awesome, abra a pasta
svgs, onde os ícones SVG prontos para serem incorporados em HTML estão coletados. - Escolha o ícone que mais lhe agrada e baixe o arquivo SVG correspondente.
- Insira este arquivo diretamente no código HTML da sua página — isso é tudo que você precisa para começar a usá-lo.
Lembre-se de que os ícones SVG extraídos de fontes possuem características de sistema de coordenadas únicas, com o eixo Y apontando para cima. Usando atributos de transformação como scale e translate, você pode facilmente adaptá-los às suas necessidades:
<svg height="179.2" width="179.2" transform="scale(1,-1) translate(0,-179.2)">
<path d="..."></path>
<!-- Sim, o eixo Y está orientado de forma diferente, mas nós contornamos isso. Lembre-se: SVG de fontes muitas vezes vem de cabeça para baixo, e precisamos corrigir isso. -->
</svg>Se você precisar trabalhar com um conjunto complexo de ícones, considere usar o IcoMoon App — ele permite uma extração fácil de SVG e escalonamento correto. Para um controle total, confira o fontforge, onde você pode usar scripts para ajustar corretamente a orientação e os caminhos do seu SVG.
Não se esqueça de verificar o resultado para garantir que o ícone mantenha suas dimensões originais e atenda às suas expectativas.
Compatibilidade Garantida
Cenários de Teste
Seus SVGs devem estar prontos para funcionar em vários navegadores, frameworks e dispositivos. Apenas testes minuciosos lhe darão confiança em seu desempenho estável.
Compatibilidade entre Navegadores
Desenvolvedores experientes sabem que o suporte a SVG varia entre diferentes navegadores:
- Regras CSS podem funcionar de forma diferente ou podem não funcionar em alguns navegadores.
- Esteja atento às diferenças no comportamento do SVG e ajuste-os de acordo com as especificidades de cada navegador.
- Não negligencie atributos de acessibilidade como
aria-hidden.
Otimização de Desempenho
Incorporar SVG ao HTML deve melhorar o desempenho, e não degradá-lo:
- Minificação: reduza o tamanho dos arquivos SVG sem perder qualidade.
- Carregamento sob demanda: permita que ícones que não precisam ser exibidos imediatamente sejam carregados após o conteúdo principal.
- HTTP/2: aproveite o HTTP/2 para acelerar o carregamento.
Visualização
Vamos imaginar extrair SVG do Font Awesome como desarmar uma bomba:
Bomba (💣): [Fio 1, Fio 2, Fio 3, ..., Fio n]Para desarmá-la através do HTML, use a seguinte abordagem:
1. Cortadores (✂️): tag `<i class="fa fa-icon-name"></i>`
2. Corte (💥): extraia SVG usando JavaScript ou outra ferramenta
3. Resultado (💡): o código SVG resultanteEntão, o resultado:
💣 ➡️ ⚙️ = SVG Desarmado [💡 Fio 1, 💡 Fio 2, ..., 💡 Fio n]Parabéns, suas joias SVG estão prontas para uso! 😎 🎉
Compreensão Profunda e Gestão do Ciclo de Vida
Responsividade e Escalonamento
Os SVGs são perfeitos para aplicações web responsivas:
- Eles escalam perfeitamente e redimensionam sem perder qualidade usando CSS.
- Media queries ajudam os SVGs a se adaptarem a diferentes telas e dispositivos.
- Graças à interação com ViewBox, os SVGs mantêm suas proporções em várias resoluções.
Mantendo-se Atualizado
O repositório Font Awesome é regularmente atualizado e está em evolução:
- Fique de olho no repositório Font Awesome e suas atualizações.
- Assine a newsletter do Font Awesome para se manter informado sobre novos ícones.
- Evite usar elementos desatualizados, pois os ícones também podem sair de moda.
Possibilidades Criativas
Modifique seus SVGs a seu critério:
- Edite caminhos para adicionar singularidade ao design do seu site.
- Dê vida aos ícones SVG com animações CSS ou SMIL.
- Adicione interatividade com um pouco de JavaScript.
Recursos Úteis
- Font Awesome — um ponto de partida para explorar o mundo do Font Awesome.
- Padrão HTML — um documento normativo descrevendo a interação entre SVG e HTML.
- Encontrando o Ícone Perfeito | Font Awesome — uma vitrine das novidades no mundo dos ícones.
- Conversor de Font Awesome para PNG — converta rapidamente ícones do Font Awesome para PNG usando esta ferramenta.
- Questões sobre 'font-awesome+svg' no Stack Overflow — uma plataforma para discutir questões relacionadas ao Font Awesome e SVG.
- Sistema de Ícones Baseado em Sprites SVG | CSS-Tricks — detalhes sobre como usar um sistema de ícones baseado em sprites SVG.
- Comece com Mais de 1000 Ícones Grátis | Font Awesome — um guia para novos usuários do Font Awesome.