Como usar o Font Awesome 5 com o React

Introdução

O Font Awesome é um kit de ferramentas para sites que oferece ícones e logotipos sociais. O React é uma biblioteca de programação que é utilizada para criar interfaces de usuários. Embora o time do Font Awesome tenha criado um componente do React para promover a integração, ainda existem alguns fundamentos a serem compreendidos sobre o Font Awesome 5 e como ele é estruturado. Neste tutorial, você irá explorar como usar o componente Font Awesome do React.

Pré-requisitos

Nenhuma programação é exigida para este tutorial, mas caso tenha interesse em experimentar com alguns do exemplos, você precisará do seguinte:

• O Node.js instalado localmente, o que pode ser feito seguindo Como instalar o Node.js e criar um ambiente de desenvolvimento local.
• Create React App, que pode ser feito seguindo Como configurar um projeto do React.

Passo 1 — Usando o Font Awesome

O time do Font Awesome criou um componente do React para que você possa utilizar os dois em conjunto. Com essa biblioteca, siga o tutorial após ter selecionado seu ícone.

Neste exemplo, iremos usar o ícone home a fazer tudo no arquivo App.js:

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

Seu aplicativo agora possui um pequeno ícone home. Você irá notar que esse código apenas seleciona o ícone home para que apenas um ícone seja adicionado ao nosso tamanho do pacote.

Agora, o Font Awesome irá garantir que esse componente será substituído pela versão SVG do ícone assim que o componente for montado.

Passo 2 — Escolhendo ícones

Antes de instalar e usar os ícones, é importante saber como as bibliotecas do Font Awesome são estruturadas. Como existem muitos ícones, o time decidiu dividi-los em vários pacotes.

Quando for escolher quais ícones você deseja, é recomendável visitar a página de íconas do Font Awesome para explorar as suas opções. Você verá filtros diferentes para escolher no lado esquerdo da página. Esses filtros são muito importantes, pois indicam de qual pacote você deve importar seu ícone.

No exemplo acima, obtivemos o ícone home do pacote @fortawesome/free-solid-svg-icons.

Como determinar o pacote ao qual o ícone pertence

É possível decobrir o pacote ao qual o ícone pertence revisando os filtros à esquerda. Você também pode clicar em um ícone e ver o pacote ao qual ele pertence.

Assim que você descobre o pacote ao qual uma fonte pertence, é importante lembrar-se do atalho de três letras para aquele pacote:

• Solid Style - fas
• Regular Style - far
• Light Style - fal
• Duotone Style - fad

É possível pesquisar por um tipo específico na página de ícones:

Como usar ícones de pacotes específicos

Se você navegar na página de ícones do Font Awesome, irá notar que geralmente existem várias versões do mesmo ícone. Por exemplo, vamos dar uma olhada no ícone boxing-glove:

Para usar um ícone específico, será necessário ajustar o <FontAwesomeIcon>. Em seguida estão vários tipos do mesmo ícone de diferentes pacotes. Isso inclui os atalhos de três letras discutidos anteriormente.

Aqui está um exemplo da versão sólida:

<FontAwesomeIcon icon={['fas', 'code']} />

Isso recorre à versão sólida padrão caso um tipo não seja especificado:

<FontAwesomeIcon icon={faCode} />

E a versão light usando fal:

<FontAwesomeIcon icon={['fal', 'code']} />;

Foi necessário substituir nosso a propriedade do nosso ícone para que fosse uma matriz ao invés de uma string simples.

Passo 3 — Instalando o Font Awesome

Como existem várias versões de um mesmo ícone, pacotes diversos e pacotes gratuitos/profissionais, a instalação de todos eles envolve mais de um pacote npm. Você pode precisar instalar vários deles para então escolher os ícones que você deseja.

Para este artigo, vamos instalar tudo para que possamos demonstrar como instalar múltiplos pacotes.

Execute o seguinte comando para instalar os pacotes necessários:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

Execute os comandos a seguir para instalar os ícones regulares:

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

Estes irão instalar os ícones sólidos:

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

Use esse comando para os ícones light:

# light icons
npm i -S @fortawesome/pro-light-svg-icons

Isso irá instalar ícones duotone:

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

Por fim, isto irá instalar os ícones de marca:

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

Ou, caso prefira tê-los todos instalados de uma só vez, use este comando para instalar os conjuntos de ícones gratuitos:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Se você tiver uma conta profissional com o Font Awesome, use o seguinte comando para instalar todos os ícones:

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

Você terminou de instalar os pacotes, mas ainda não os usou em seu aplicativo nem os adicionou aos nossos pacotes de aplicativo. Vamos olhar como você pode fazer isso no próximo passo.

Passo 4 — Criando uma biblioteca de ícones

Pode ser um processo tedioso precisar importar o ícone que você deseja em vários arquivos. Supondo que você use o logotipo do Twitter em vários lugares, você não vai querer precisar escrever isso diversas vezes.

Para importar tudo em um só lugar, ao invés de importar cada ícone em cada arquivo separado, vamos criar uma biblioteca Font Awesome.

Vamos criar o fontawesome.js na pasta src e então importá-lo em index.js. Sinta-se livre para adicionar este arquivo em qualquer lugar, contanto que os componentes que você quiser usar tenham acesso aos ícones (sejam componentes filhos). Você poderia até mesmo fazer isso diretamente em seu index.js ou App.js. No entanto, pode ser melhor mover isso para um arquivo separado, uma vez que ele pode ser grande:

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

Se você fez isso em seu próprio arquivo, então será necessário importá-lo para o index.js:

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

Como importar um pacote de ícones inteiro

Não é recomendável importar um pacote inteiro, pois assim todos os ícones são importados em seu aplicativo. Isso pode fazer com que o tamanho do pacote seja muito grande. Se for necessário importar o pacote inteiro, isso certamente é possível.

Neste exemplo, vamos supor que você queria todos os ícones de marca em @fortawesome/free-brands-svg-icons. Neste caso, você iria usar o seguinte para importar todo o pacote:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

O fab representa todo o pacote de ícones de marca.

Como importar ícones individualmente

A maneira recomendada de usar os ícones do Font Awesome é importando-os um a um, para que os tamanhos finais de seus pacotes sejam os menores possíveis, considerando que você irá importar apenas o necessário.

É possível criar uma biblioteca a partir de vários ícones de diferentes pacotes desta forma:

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Como importar o mesmo ícone em vários estilos

Caso queira todos os tipos de boxing-glove para os pacotes fal, far e fas, importe todos eles como um nome diferente e então adicione-os.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

Depois disso, você pode utilizá-los implementando os diferentes prefixos:

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

Passo 5 — Usando ícones

Agora que instalou o que precisa e adicionou seus ícones à sua biblioteca do Font Awesome, você está pronto para usá-los e atribuir tamanhos. Neste tutorial, vamos usar o pacote light (fal).

Este primeiro exemplo irá usar o tamanho normal:

<FontAwesomeIcon icon={['fal', 'code']} />

O segundo exemplo usa o dimensionamento nomeado, que usa abreviações para pequeno (sm), médio (md), grande (lg) e extragrande (xl):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

A terceira opção é usar o dimensionamento numerado que pode ir até 6:

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

Ao usar o dimensionamento numerado, também é possível usar decimais para encontrar o tamanho perfeito:

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

O Font Awesome estiliza os SVGs que ele usa tomando a cor de texto do CSS. Se você colocasse uma tag <p> onde esse ícone fosse, a cor do parágrafo seria a cor do ícone:

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

O Font Awesome também possui um recurso de transformações de potência, onde você pode juntar diferentes transformações:

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

É possível usar qualquer uma das transformações encontradas no site do Font Awesome. Use isso para mover os íconas para cima, para baixo, para a esquerda ou para a direita de forma a obter o posicionamento perfeito ao lado do texto ou dentro de botões.

Ícones de largura fixa

Ao usar ícones em um local onde todos eles precisam ser uniformes e da mesma largura, o Font Awesome permite usar a propriedade fixedWidth. Por exemplo, vamos supor que você precise de larguras fixas para o menu suspenso da sua navegação:

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

Ícones giratórios

A implementação do movimento giratório é útil em botões de formulários quando um formulário estiver sendo processando. Use o ícone giratório para criar um efeito de carregamento distinto:

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

Você pode usar a propriedade spin em qualquer coisa!

<FontAwesomeIcon icon={['fal', 'code']} spin />

Avançado: como mascarar ícones

O Font Awesome permite a combinação de dois ícones para criar efeitos com o mascaramento. Você define seu ícone normal e então usa a propriedade mask para definir um segundo ícone para ficar por cima. O primeiro ícone ficará limitado dentro do ícone de mascaramento.

Neste exemplo, criamos filtros de marcador usando o mascaramento:

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

Observe como é possível reunir várias propriedades de transform para mover o ícone interno para se encaixar dentro do ícone de mascaramento.

Até mesmo colorimos e alteramos o logotipo de fundo com o Font Awesome:

Passo 6 — Usando o react-fontawesome e ícones fora do React

Se o seu site como um todo não for um aplicativo de página única (SPA), você possui um site tradicional e adicionou o React por cima. Para evitar a importação da biblioteca principal do SVG/JS e também a biblioteca react-fontawesome, o Font Awesome criou uma maneira de usar as bibliotecas do React para monitorar ícones fora dos componentes do React.

Se você possui algum <i class="fas fa-stroopwafel"></i>, podemos dizer ao Font Awesome para monitorar e atualizar eles usando o seguinte:

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

Os MutationObservers são uma tecnologia Web que permite-nos monitorar o DOM por alterações com um bom desempenho. Aprenda mais sobre essa técnica nos documentos do React do Font Awesome.

Conclusão

Usar o Font Awesome e o React em conjunto gera ótimos resultados, mas cria a necessidade de usar vários pacotes e considerar diferentes combinações. Neste tutorial, você explorou algumas das maneiras de usar o Font Awesome e o React juntos.