Neste artigo, você aprenderá como usar a biblioteca React Icons para exibir ícones em seu projeto React.

Introdução

Uma das melhores maneiras de aprimorar a experiência do usuário do seu projeto React é usar ícones brilhantes e coloridos. Eles não apenas melhoram a aparência do seu aplicativo, mas também dão ao seu site uma aparência mais moderna e elegante.

Os ícones permitem até que os designers economizem espaço na tela. Além disso, os ícones são universais e seu uso é familiar para desenvolvedores e usuários.

Por exemplo, o que você acha que fica melhor? Este texto:

Ou estes ícones:

Para renderizar ícones no React, a biblioteca mais comumente usada é Ícones do React . É uma biblioteca fácil de usar para renderizar ícones em seu aplicativo.

Instalação

Em seu projeto React, execute o seguinte comando de terminal:

 npm install react-icons

Uso simples

Primeiro, importe o ícone desejado para o seu projeto:

 importar {FcHeadset} de"react-icons/fc"

E, em seguida, renderize-o em seu componente React:

 return ( 
 
 Para codificação, você precisa de um bom  
 
);

Como você pode ver, você pode exibir um ícone como um elemento filho.

Observe que cada pacote de ícone tem sua própria subpasta. Por exemplo, se você deseja obter ícones do pacote de ícones de jogos , você deve use a seguinte importação:

 importar {IconName} de"react-icons/gi";

Renderizando ícones em listas

Como antes, importe seus ícones da seguinte forma:

 import {FcIpad, FcElectronics, FcCalculator} de"react-icons/fc";

Aqui, importamos nossos ícones do pacote Flat Color .

Para renderizá-lo, escreva o seguinte código no bloco return do seu componente:

 return ( 
 
 Minha lista de desejos 
 
 
 Um iPad  {""} 
 
 Nova CPU da AMD  
 
 Calculadora para meu exame  
 
 
);

Botões e links clicáveis ​​

 importar {FaGoogle, FaRegSun} de"react-icons/fa";
função padrão de exportação SimpleButton () { Retorna ( 
 
 Faça login com o Google: 
    
  alert ("Página de configurações")}>   
 );
}

Na linha 1, importamos dois ícones do pacote Font Awesome . Na linha 7, renderizamos o ícone FaGoogle entre as tags a . Isso significa que este ícone agora é um link. Mais tarde, na linha 11, renderizamos o ícone FaRegSun entre as tags do botão , conseqüentemente transformando o ícone em um botão clicável.

Renderização condicional

 importar {FcAndroidOs} de"react-icons/fc";
função padrão de exportação ConditionalRendering () { const usaAndroid=true; Retorna ( 
 {usaAndroid? ( 
 {""} Eu uso  
 ): ( 
 Não usa Android 
 )} 
 );
}

Na linha 3, declaramos o usesAndroid Boolean, o que tornará possível a renderização condicional. Além disso, o código nas linhas 6–13 afirma que se o valor usesAndroid for true , renderize o ícone FcAndroidOs assim:

Caso contrário, renderize um elemento p padrão.

Quando você define o usesAndroid Boolean como false , este será o resultado:

Trocando entre dois ícones

Digamos que você queira mudar de um ícone do Google+ para um ícone da Apple. Você pode usar React Hooks para resolver este problema:

 import {useState} de"react";
importar {AiFillApple, AiOutlineGoogle} de"react-icons/ai";
função padrão de exportação SwappingIcons () { const [ícone, setIcon]=useState ("maçã"); const changeIcon=(estado)=> { if (estado==="maçã") { retornar"google"; } return"apple"; }; Retorna ( 
  setIcon ((old)=> changeIcon (old))}> Alterar  
 {""} Eu trabalho em: {icon==="apple"? : } 
 {""} 
 );
}

Primeiro, declaramos um ícone Hook que decide qual ícone renderizar. O valor inicial é apple .

Das linhas 6 a 11, criamos a função changeIcon , que troca o valor do ícone entre apple ou google .

Mais tarde, criamos um elemento botão simples. Se o usuário clicar neste botão, execute a função changeIcon para trocar valores.

Finalmente, na linha 18, especificamos que se o ícone Hook for apple , então renderizaremos o ícone AiFillApple . Caso contrário, renderize o ícone AiOutlineGoogle .

Usando formulários

Aqui, você usará a biblioteca Formik , pois é mais fácil de trabalhar com. Para instalar o Formik, execute o seguinte comando:

 npm i formik

Agora, para construir um formulário com ícones, escreva o seguinte código:

 import React, {useState} de"react";
importar {Formik, Field, Form} de"formik";
importar {AiFillApple, AiOutlineGoogle} de"react-icons/ai"; função padrão de exportação FormExample () { const [ícone, setIcon]=useState (""); Retorna ( 
 
 Inscreva-se 
  { setIcon (values.picked); }} > {({valores})=> ( 
 
 Selecionado 
 
         
  Enviar  
 )}  Você trabalha em: {icon} 
 );
}

Na linha 12, informamos ao Formik que se o formulário não for enviado, o valor retornado deste formulário é uma string em branco. Então, das linhas 14 a 17, dizemos ao React que, quando o usuário enviar o formulário, defina o ícone Hook com o valor selecionado.

Posteriormente, nas linhas 23–29, criamos nossos botões radio . Ambos têm a propriedade name definida como pick para que o Formik possa identificar esses elementos e recuperar os valores enviados do formulário.

Finalmente, na linha 35, exibimos o valor do elemento icon .

Configuração do ícone

Observe que em nosso aplicativo até agora, todos os ícones renderizados eram minúsculos. Felizmente, a biblioteca React Icon nos permite personalizar o tamanho e a cor desses ícones.

Cor

Para fazer isso, você precisará usar a API de contexto do React . Primeiro, crie um componente separado que projetará seu ícone:

 import {IconContext} de"react-icons"; função padrão de exportação ConfigIcon ({filhos}) { Retorna ( <>  {crianças}   );
}

De acordo com a linha 7, o IconContext.Provider mudará as propriedades do nosso ícone. Aqui, especificamos que a propriedade color será green .

Finalmente, na linha 8, dizemos ao React para renderizar os elementos filhos do componente GreenIcon . Isso significa que se você tiver um ícone como elemento filho do GreenIcon , seu ícone será verde.

É hora de usar nosso componente:

 import"./styles.css";
importar GreenIcon de"./GreenIcon";
importar {AiFillFastForward} de"react-icons/ai";
função padrão de exportação App () { Retorna ( 
    
 );
}

Nosso componente AiFillFastForward agora terá a cor verde.

Tamanho

 return ( <>  {crianças}  
);

Na linha 3, definimos o tamanho para 4em . O tamanho padrão do ícone é 1em .

O ícone personalizado agora parece maior e melhor!

Todos os exemplos de código estão em CodeSandbox .

Conclusão

A biblioteca do React Icon foi muito fácil de usar. Ele não apenas fornece todos os ícones populares necessários para o seu projeto, mas também é extremamente rápido e pequeno para garantir que seu aplicativo não sofra atrasos.

Muito obrigado por ler!

A postagem React Icons: Um tutorial abrangente com exemplos apareceu primeiro no LogRocket Blog .