Ícones são uma forma de comunicar visualmente conceitos e significados sem o uso de palavras. Isto pode ser para categorização, uma ação ou mesmo um aviso.

Como podemos adicionar ícones usando SVG a nossos aplicativos do React para melhorar nossa comunicação visual?

• O que é o SVG?
• O que torna o SVG ótimo para a web?
• Parte 0: criação de um aplicativo do React
• Parte 1: inserção de ícones SVG com o react-icons
• Parte 2: adição manual de arquivos SVG a um componente do React

O que é o SVG?

SVG (texto em inglês) é uma sigla do inglês para Scalable Vector Graphics, que, em português, significa Gráficos Vetoriais Escaláveis. É um formato de arquivo baseado em uma linguagem de marcação semelhante ao XML que permite aos desenvolvedores e designers criar imagens vetoriais usando definições de caminhos.

O que torna o SVG ótimo para a web?

O SVG nasceu para a web. É um padrão aberto que foi criado pelo W3C para fornecer uma maneira melhor de adicionar imagens à web. Se você abrir um arquivo SVG em seu computador, você pode se surpreender ao descobrir que é tudo código!

Isto tudo acontece dentro de um pequeno arquivo. Normalmente, quando se usa SVG, pode-se tirar vantagem do seu tamanho reduzido em comparação com arquivos de imagem maiores, que podem ser necessários para fornecer a mesma alta resolução.

Além disso, como estamos definindo SVG como paths (caminhos), eles podem ser dimensionados como grandes ou pequenos, como quisermos. Isto os torna mais flexíveis para o uso na web, especialmente ao tornar as experiências mais responsivas.

O que vamos criar?

Primeiramente, vamos usar um pacote chamado react-icons que nos permitirá importar ícones mais facilmente de bibliotecas populares de ícones, como a Font Awesome, diretamente para nosso aplicativo.

Nós também vamos dar uma olhada em como podemos adicionar manualmente arquivos SVG em nosso aplicativo copiando o código de um arquivo SVG diretamente em um novo componente.

Parte 0: criação de um aplicativo do React

Para este tutorial, você pode usar qualquer framework de React que você desejar, seja o Create React App ou o Next.js. Você pode até mesmo usar um projeto existente.

Como não precisamos de nada especial para adicionar nossos ícones, vou usar o create-react-app.

Para começar com o create-react-app, você pode criar um projeto usando o seguinte comando em seu terminal:

yarn create react-app [nome-do-projeto]
# ou
npx create-react-app [nome-do-projeto]

Nota: substitua [nome-do-projeto] pelo nome que você deseja usar para seu projeto. Eu vou usar meus-ícones-svg.

Uma vez que você tenha seu novo aplicativo ou seu aplicativo existente, estamos prontos para continuar!

Parte 1: inserção de ícones SVG com o react-icons

Adicionando o react-icons ao seu projeto

Para começar com o react-icons, temos que instalá-lo em nosso projeto.

Dentro de seu projeto, execute o seguinte comando:

yarn add react-icons
# ou
npm install react-icons --save

Uma vez concluído, devemos estar prontos para usá-lo no nosso projeto.

Selecionando ícones para um projeto

Uma das coisas legais do react-icon é a extensa biblioteca que disponibilizam dentro do pacote único.

Não temos só a Font Awesome imediatamente disponível, como também temos GitHub’s Octicons, Heroicons, Material Design Icons e muito mais.

Ao escolher ícones, você tem praticamente a habilidade de usar qualquer ícone que quiser a qualquer momento. Dito isso, eu recomendaria tentar manter uma aparência consistente com os seus ícones.

Se você usar principalmente a Font Awesome para seu site, pode parecer um pouco estranho e inconsistente se você começar a adicionar ícones de cor simples à mistura. No final das contas, você quer proporcionar uma experiência em que as pessoas sejam capazes de identificar facilmente os padrões que você cria.

Usando react-icons no seu projeto

Uma vez encontrados os ícones que você deseja usar, podemos agora adicioná-los ao nosso projeto.

O site do react-icons facilita a pesquisa do nome do ícone que queremos usar para importar para nosso projeto.

Se quisermos usar o ícone do foguete do Font Awesome, podemos navegar até Font Awesome na barra lateral, pesquisar na página por "rocket" (pesquise em inglês, com CMD+F ou CTRL+F) e depois clicar no ícone que copiará seu nome para sua área de transferência.

Também poderíamos procurar por "rocket" no formulário de busca no canto superior esquerdo da página, que nos mostra o resultado "rocket" em todos os conjuntos de ícones.

Dentro de nosso projeto, agora podemos importar esse ícone. Semelhante às instruções no topo da página do react-icons, queremos importar aquele ícone específico do react-icons/fa, que se refere ao módulo Font Awesome do react-icons.

Adicione o seguinte ao topo do arquivo no qual você deseja importar o ícone. Se estiver usando um novo projeto de create-react-app, você pode adicioná-lo ao topo do src/App.js.

import { FaRocket } from 'react-icons/fa';

Para testar isso, vamos substituir o logotipo do React pelo nosso ícone.

Remova o componente <img> e em vez disso, acrescente:

<FaRocket />

E se recarregamos a página, podemos ver nosso foguete!

Nosso foguete, porém, não está girando como o logotipo do React. Vamos consertar isso.

Adicione a classe .App-logo ao componente FaRocket:

<FaRocket className="App-logo" />

E o foguete deve agora estar girando!

Ele também está um pouco pequeno. Se olharmos em src/App.css, estamos definindo a altura da .App-logo para 40vmin. Embora isso funcione, para que nosso ícone preencha o espaço, precisamos também fornecer uma largura para que ele a preencha.

Adicione o seguinte à classe .App-logo para adicionar uma largura:

width: 40vmin;

Embora provavelmente esteja um pouco grande demais agora, estamos em um tamanho mais apropriado e temos o nosso ícone!

Siga o commit.

Parte 2: adição manual de arquivos SVG a um componente do React

Às vezes, você não quer adicionar uma nova biblioteca apenas para obter um ícone, mas apenas um ícone customizado que não está disponível em uma biblioteca pública.

Felizmente, com React, podemos criar um componente SVG muito facilmente, o que nos permite adicionar nossos ícones SVG customizados onde quisermos.

Primeiro, vamos encontrar um ícone.

Embora todos os Heroicons estejam disponível dentro de react-icons, vamos usá-los como exemplo, já que é fácil encontrar, e copiar código SVG.

Vá para heroicons.com e procure por um ícone que você gostaria de usar para este exemplo. Eu vou usar "globe".

Depois de encontrar o ícone desejado, passe o mouse sobre esse ícone, onde você verá opções para copiar esse ícone como SVG ou JSX e copiá-lo como JSX.

Com esse ícone copiado, crie um arquivo em src com o nome de Globe.js.

Dentro desse arquivo, vamos criar um componente chamado Globe e copiar nosso SVG dentro desse componente.

import React from 'react';

const Globe = () => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  )
}

export default Globe;

Observação: ao copiar o SVG normal para um componente do React, ele pode não funcionar "como está". Às vezes, os arquivos SVG incluem classes de CSS ou atributos de elementos que não são válidos com JSX.

Se você encontrar erros, tente corrigir os atributos e olhar para o console da web para ver os avisos e erros que o React lança. Como copiamos como JSX, pudemos fazer com que funcionasse imediatamente.

Agora, voltemos a src/App.js e vamos importar nosso novo componente:

import Globe from './Globe';

Então, podemos substituir nosso ícone de foguete por nosso novo componente:

<Globe />

E se abrirmos nosso navegador, poderemos ver nosso globo!

No entanto, ele está um pouco grande.

Nós queremos aplicar a nossa classe .App-logo ao nosso componente Globe. Por isso, precisamos atualizar esse componente para ter a prop className.

De volta à src/Globe.js, adicione o argumento prop className:

const Globe = ({ className }) => {

Em seguida, acrescente uma nova prop com essa className ao componente <svg:

<svg className={className}

Agora, podemos atualizar nosso componente Globe em src/App.js para incluir essa classe:

<Globe className="App-logo" />

E se recarregarmos a página, podemos ver que nosso logotipo está de volta ao tamanho certo e está girando novamente!

Siga o commit.

Por que não o incluímos como um arquivo img?

Embora possamos incluí-lo como um arquivo de imagem, assim como o React faz no código padrão do create-react-app, obtemos alguns benefícios ao adicionar nossos arquivos "em linha".

Pelo menos, ao adicionar SVG em linha, podemos acessar os diferentes caminhos com propriedades CSS. Isto nos dá mais flexibilidade para personalizá-lo dinamicamente.

Isso também causará menos solicitações HTTP. O navegador saberá como carregar esse SVG. Portanto, não precisamos incomodar o navegador para que solicite que esse arquivo seja incluído na página.

Dito isso, ainda é uma opção válida adicionar um arquivo SVG à página.

• Siga o autor no Twitter
• Inscreva-se no canal do YouTube do autor
• ✉️ Inscreva-se para receber a newsletter do autor
• Patrocine o autor