Se você estiver trabalhando em um projeto de front-end, Font Awesome é um ótimo complemento para o bem ícones de mídia social conhecidos e muito mais. É particularmente útil para mostrar ícones que representam links para outras fontes, como YouTube ou Twitter.
Font Awesome tem um ótimo conjunto de documentos e pode ser usado em quase qualquer projeto de front-end. Com o React , o Font Awesome tem uma configuração especial que fornece às suas bibliotecas algumas importações que facilitam o uso.
Nesta postagem, vou explicar como configurar o projeto Font Awesome in a React. Também incluirei alguns princípios básicos sobre como usar o Font Awesome em seus componentes React.
Pessoalmente, sou um fã do Font Awesome por causa da vasta gama de ícones de mídia social que ele oferece. Também gosto muito da documentação e de como a configuração pode ser intuitiva. Você pode verificar um exemplo de como eu uso Font Awesome em meu site e meu blog pessoal .
O Font Awesome oferece vários ícones diferentes para tudo, desde itens básicos, como uma xícara de café, a logotipos de marcas conhecidas, como o YouTube. Se quiser ver mais, confira a galeria deles .
A versão 5 é a versão mais recente (estável) Font Awesome, então é isso que você vai querer usar se estiver apenas começando. Confira o changelog Font Awesome para mais .
Se desejar acompanhar enquanto iniciamos o tutorial, tenho meus exemplos armazenados em meu repo no GitHub . Eu recomendaria fazer um clone disso, pois irei me referir a esse projeto ao longo deste post.
Configurando seu projeto React
Então você tem seu projeto React e está pronto para importar Font Awesome para mostrar alguns ícones de mídia social em suas páginas. A primeira etapa é usar o npm para instalar as dependências principais do Font Awesome:
npm i--save @ fortawesome/fontawesome-svg-core npm install--save @ fortawesome/free-solid-svg-icons npm install--save @ fortawesome/react-fontawesome
Em seguida, você provavelmente desejará instalar o ícone de marca gratuito SVGs que o Font Awesome oferece. Isso inclui ícones de marcas de empresas como Apple, Microsoft e outras. Vá em frente e instale-os com o seguinte:
npm install--save @ fortawesome/free-marks-svg-icons npm install--save @ fortawesome/free-regular-svg-icons
Isso é tudo de que você precisa para a configuração gratuita , mas se quiser criar sua conta e usar os ícones pro , você também pode executar opcionalmente o seguinte:
npm i--save @ fortawesome/pro-solid-svg-icons npm i--save @ fortawesome/pro-regular-svg-icons npm i--save @ fortawesome/pro-light-svg-icons npm i--save @ fortawesome/pro-duotone-svg-icons
Para o propósito desta postagem, vou abordar apenas a versão gratuita. Se quiser saber mais sobre a versão profissional, confira os documentos aqui sobre preços https://fontawesome.com/plans .
OK-com essas importações de npm, agora você está pronto para fazer referência ao Font Awesome em seu projeto.
Referenciando bibliotecas impressionantes de fontes, um conto de duas importações
Quando você usa o Font Awesome, ele fornece duas maneiras diferentes de referenciar suas bibliotecas. Sua motivação para usá-los dependerá do que você está tentando realizar, bem como dos requisitos do seu projeto.
O primeiro método é importá-los individualmente em qualquer componente que os faça referência:
//copiado dos documentos oficiais em https://fontawesome.com/how-to-use/on-the-web/using-with/react
importar ReactDOM de"react-dom";
importar {FontAwesomeIcon} de"@ fortawesome/react-fontawesome";
importar {faCoffee} de"@ fortawesome/free-solid-svg-icons"; elemento const=; ReactDOM.render (elemento, document.body);
Se você está acompanhando meu projeto de exemplo, é o que vê na pasta
method1.
Isso funciona porque torna o seu uso extremamente simples. Ele também permite que você restrinja suas importações para apenas o que você precisa para sua construção final. Se você estiver usando isso em várias páginas, no entanto, isso pode ser uma verdadeira dor.
A segunda maneira de importá-los é globalmente (também conhecido como biblioteca). A maneira de fazer isso é primeiro importá-los no ponto de entrada do seu aplicativo e, em seguida, fazer referência às importações nos componentes filhos, como você vê aqui:
//copiado dos documentos oficiais em https://fontawesome.com/how-to-use/on-the-web/using-with/react //app.js
importar ReactDOM de"react-dom";
importar {biblioteca} de"@ fortawesome/fontawesome-svg-core";
importar {fab} de"@ fortawesome/free-marks-svg-icons";
importar {faCheckSquare, faCoffee} de"@ fortawesome/free-solid-svg-icons";
library.add (fab, faCheckSquare, faCoffee);
Agora você pode fazer referência aos ícones diretamente em qualquer componente filho com:
//copiado dos documentos oficiais em https://fontawesome.com/how-to-use/on-the-web/using-with/react importar React de"react";
importar {FontAwesomeIcon} de"@ fortawesome/react-fontawesome";
export const Beverage=()=> (
Se você estiver acompanhando meu projeto de amostra, você o verá na pasta
method2.
Trabalho com a API Font Awesome
Depois de importar a biblioteca para o seu projeto, você terá várias opções interessantes para o que fazer com os ícones.
Font Awesome tem versões sólidas e regulares da maioria dos ícones. Você pode definir suas larguras e até mesmo girar as próprias imagens apenas passando valores para a API do componente:
//copiado dos documentos oficiais https://fontawesome.com/how-to-use/on-the-web/using-with/react //Largura fixa//inverso //mostrado em uma lista //rodado //sacudiu //com borda //https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons //retirado //opacidade //estilos personalizados //transformações de energia //mascarando ícones
Você também pode colocá-los em camadas e até especificar classes personalizadas ou coisas como o SVG de origem:
//copiado dos documentos oficiais https://fontawesome.com/how-to-use/on-the-web/using-with/react //ícones de camadas//usando svgs
Você pode até animar os ícones especificando comportamentos como girar ou pulsar:
//copiado dos documentos oficiais https://fontawesome.com/how-to-use/on-the-web/using-with/react
Se você quiser simular o valor do ícone em um teste de unidade, também pode fazer isso com o seguinte:
//copiado dos documentos oficiais https://fontawesome.com/how-to-use/on-the-web/using-with/react
importar React de"react";
export function FontAwesomeIcon (props) { return ;
}
Se desejar ler sobre todas as diferentes opções que você tem, verifique a instalar documentos .
Vejamos alguns exemplos
Como mencionei na introdução, criei um projeto GitHub que mostra muitos desses exemplos e oferece uma solução de trabalho para começar. Se ainda não o fez, clone-o antes de prosseguir.
Meu projeto tem dois exemplos, e cada um cobre as diferentes abordagens para importar Font Awesome com seu projeto:
- A pasta
method1tem uma implementação que faz referência direta aos componentes Font Awesome usados. - A pasta
method2como uma implementação que importa Font Awesome globalmente (biblioteca)
Para ambos os projetos, se você cd nas pastas, deve ser capaz de vê-los em execução após executar o seguinte código:
npm install npm run start
O primeiro projeto é super simples e mostra apenas um ícone de café:
Importa o ícone diretamente no componente, como você pode ver aqui:
importar {FontAwesomeIcon} de"@ fortawesome/react-fontawesome";
importar {faCoffee} de"@ fortawesome/free-solid-svg-icons";
const FirstComponent=()=> { Retorna ( verifique este primeiro componente );
};
exportar FirstComponent padrão;
O segundo projeto importa vários ícones globalmente e, em seguida, faz referência a eles em dois componentes filhos, como você pode ver aqui:
Primeiro, importa os componentes globalmente no arquivo App.js :
importar ReactDOM de"react-dom";
import"./App.css";
importar {biblioteca} de"@ fortawesome/fontawesome-svg-core";
importar {fab} de"@ fortawesome/free-marks-svg-icons";
importar {faCheckSquare, faCoffee} de"@ fortawesome/free-solid-svg-icons";
importar FirstComponent de"./components/first-component";
importar SecondComponent de"./components/second-component";
library.add (fab, faCheckSquare, faCoffee);
function App () { Retorna ( Importando componentes globais impressionantes de fontes
);
}
exportar aplicativo padrão;
Então, nos componentes filho, ele faz referência aos ícones Font Awesome específicos que foram puxados para dentro:
import"../App.css";
importar {FontAwesomeIcon} de"@ fortawesome/react-fontawesome";
Const SecondComponent=()=> { Retorna ( verifique este segundo componente com todos os ícones estilizados!
Pensamentos finais
Espero que você tenha gostado desta postagem e que ela tenha ajudado você a começar a usar o Font Awesome and React. Recomendo que você verifique meu projeto de exemplo e leia a documentação do Font Awesome para obter mais informações.
Obrigado por ler! Siga-me em andrewevans.dev e conecte-se a mim no Twitter em @ AndrewEvans0102 .
A postagem Usando Font Awesome 5 com React apareceu primeiro no LogRocket Blog .
