Cómo usar react-icons para instalar Font Awesome en una aplicación con React

Artículo original escrito por Miracle Ugorji
Artículo original How to use react-icons to install Font Awesome in a React app
Traducido y adaptado por Fernando Cañas

Cuando estés construyendo una aplicación web con React, es muy probable que requieras utilizar íconos. Los íconos son representaciones gráficas de un concepto, una idea, un archivo, un programa, una aplicación, un negocio, entre otros.

También puedes usar íconos para representar la identidad de una funcionalidad. En aquellos lugares donde no quieras escribir el nombre de un programa, un ícono adecuado puede aparecer en lugar del nombre o aplicación para una fácil identificación.

Existen muchas y diferentes librerías de íconos allí afuera, así que, ¿cómo puedes agregarlas a tu aplicación en React? Aprenderemos esto y mucho más en este artículo.

En este artículo aprenderás:

¿Qué es la librería 'react-icons'?
¿Qué son los íconos de Font Awesome?
Cómo configurar tu entorno de desarrollo.
Cómo instalar 'react-icons'.
Cómo importar 'react-icons'.
Cómo usar 'react-icons' en tus aplicaciones.
Cómo usar más de un ícono.
Cómo hacer render de múltiples íconos de diferentes librerías.
Cómo ubicar íconos con estilo en línea (inline).
Cómo modificar los estilos de íconos de Font Awesome en una aplicación de React.
Bono: código para importar todas la librerías de íconos de 'react-icons'
Conclusión

¿Qué es 'react-icons'?

'React-icons' es una pequeña librería que te permite añadir íconos (desde distintas librerías de íconos) a tus aplicaciones hechas con React. Te entrega los íconos en tu aplicación como componentes, de tal manera que se hace más fácil trabajar con ellos. También te permite modificar sus estilos, así lograrás que sean consistentes con el estilo general de tu aplicación.

La librería de 'react-icons' usa ES6 para importar los íconos en tu aplicación de React. Lo hace de tal manera que solamente los íconos que realmente vas a utilizar sean lo que se importen de cada librería.

Con 'react-icons', tú sólo necesitas ejecutar un comando para poder utilizar cualquier ícono que quieras de cierta librería. Solamente necesitas escoger el código import correcto y tu ícono estará listo.

'React-icons' funciona con un conjunto amplio de librerías de íconos como Font Awesome, Material UI, Bootstrap, entre otros.

¿Qué son los íconos de Font Awesome?

Existen muchas librerías de íconos, pero una de las más populares es Font Awesome. Font Awesome es una librería o kit de herramientas (toolkit) gráficas que son creadas para comportarse como fuentes.

Los íconos de Font Awesome somo como fuentes de texto normales, pero en lugar de letras obtienes gráficos. Son vectores gráficos escalables (SVGs por sus siglas en inglés), lo cual significa que puedes cambiar sus colores, sus dimensiones y demás sin comprometer su calidad.

Ahora, para usar los íconos de Font Awesome en una aplicación de React sin 'react-icons', tienes que pasar por un proceso largo de instalación de diferentes paquetes usando varias líneas de comando.

Algunas veces puede que incluso necesites instalar el paquete Pro. En ese caso, tienes que importar todos los íconos de forma universal o en archivos individuales. ¿Todo este proceso solamente para instalar unos cuántos íconos en tu página web?

Aquí es donde 'react-icons' aparece para salvar el día. En este artículo, te mostraré cómo usar 'react-icons' para añadir íconos de Font Awesome a tu aplicación de React. Empecemos.

Cómo configurar tu entorno de desarrollo

Sigue los siguientes pasos para configurar tu entorno de desarrollo:

Nota: si ya cuentas con tu configuración lista, no hace falta que repitas el proceso. Simplemente, salta a la siguiente sección.

Dirígete a Node.js para descargar e instalar Node si aún no lo has hecho.
Abre la terminal de tu equipo.
Ingresa este comando: npm i -g create-react-app fonts-app. Este instalará una aplicación de React con todos los paquetes que necesitas para tu proyecto.
Luego, ingresa cd fonts-app/. fonts-app es el nombre de la carpeta de tu proyecto. Tu puedes elegir el nombre que quieras. cd fonts-app te llevará adentro de la carpeta de tu proyecto.
Una vez dentro, ingresa npm start para iniciar tu proyecto en un servidor de desarrollo.
Desde tu editor de código abre la carpeta src de tu proyecto y encuentra el archivo App.js.
Elimina el elemento de React que se encuentra renderizado allí por defecto y añade tu propio div, h1 o cualquier otro elemento que tú prefieras (es sólo con fines de ejemplificar).

Ahora ya está todo listo.

Cómo instalar 'react-icons'

Para instalar la librería react-icons , realiza lo siguiente:

Estando dentro de la carpeta de tu proyecto, abre la terminal de tu editor de código.
Ejecuta allí el comando npm install react-icons para instalar la librería en la carpeta de tu proyecto.

Esto puede tomar algún tiempo dependiendo de la velocidad de tu sistema. Una vez completo, ya estás listo para usar los íconos.

Cómo importar íconos con 'react-icons'

Ve a la página de 'react-icons'. Verás varias librerías de íconos que puedes utilizar. Cada librería de íconos tiene un código para importarlas. Para este tutorial, nos enfocaremos en la librería de íconos Font Awesome.

El código para importar desde Font Awesome es import { IconName } from "react-icons/fa";.

Código de ejemplo

import { IconName } from "react-icons/fa";

FontAwesomePage — Íconos de Font Awesome en la página de react-icons

Cómo usar íconos en tus aplicaciones

Sigue los siguientes pasos para usar los íconos de Font Awesome en tu apliación.

En App.js, pega el código de importar al principio del archivo o luego del código para importar React.
Vuelve a la página de 'react-icons' y elige cualquier ícono de Font Awesome.
Haz clic en el ícono para copiarlo.
Vuelve a tu código de importar en App.js.
Pega y reemplaza IconName por el nombre del ícono que copiaste, dentro de las llaves.
Usa el nombre del ícono como el nombre de un elemento de React.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart } from "react-icons/fa";

class Like extends Component {
  render() {
    return <FaHeart />  
  }
}

export default Like;

HeartIcon — Render de un ícono de corazón de Font Awesome

Al añadir <FaHeart /> al método render, se muestra el ícono en tu página web. Esto es posible porque ya habíamos importado el ícono al principio del archivo.

Nota: Debes hacer coincidir cualquier ícono que hayas copiado con el código para importar. Es decir, no puedes pegar un ícono de Bootstrap con un código de importar de Font Awesome. Hacerlo así no te dará el resultado correcto.

Cómo usar más de un ícono

Como ya importaste la librería de íconos que querías, no tendrás que hacer un import por segunda vez. Todo lo que tendrás que hacer es volver a la página de 'react-icons', copiar otro ícono que quieras usar y pegarlo dentro de las llaves.

Así es como puedes usar tantos íconos como necesites de la librería Font Awesome.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
    </div>
    ) 
  }
}

export default Like

doubleHeart — Dos corazones de Font Awesome

Cómo hacer render de múltiples íconos de diferentes librerías

Existen sutiles diferencias entre las diferentes librerías de íconos. Algunas veces no serás capaz de encontrar todos los íconos que necesitas en una única librería.

En ese caso, puedes usar los íconos de más de una librería. Solamente necesitas importar las librerías de íconos que desees. Por ejemplo, puedes importar tanto Bootstrap como Font Awesome. Luego sólo necesitarás renderizar los íconos igual que antes.

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Icons extends Component {
  render() {
    return (
    <div>
      <FaHeart />
      <FaRegHeart />
      <BsHeartFill />
      <BsHeart />
    </div>
    ) 
  }
}

export default Icons

La habilidad de importar íconos de diferentes librerías te da acceso a un amplio rango de íconos. Siempre puedes encontrar lo que necesitas una vez buscas entre las diferentes librerías de íconos.

FourHearts — Corazones renderizados desde las librerías Font Awesome y Bootstrap

Nota: solamente usa los íconos desde múltiples librerías si es absolutamente necesario, o de lo contrario esto podría hacer más lenta tu aplicación.

Cómo ubicar íconos con estilo en línea (inline)

Debes haber notado que los íconos se muestran en bloque (display: block;). Esto es porque hemos ubicado los íconos uno después del otro. Si quieres que se muestren en línea (display: inline;) entonces simplemente ubicalos uno al lado del otro. Mira un ejemplo a continuación:

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import { BsHeartFill, BsHeart } from "react-icons/bs";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart /> <FaRegHeart /> <BsHeartFill /> <BsHeart />
    </div>
    ) 
  }
}

export default Like

separatedHearts — Cuatro corazones en línea (inline)

Cómo modificar los estilos de íconos de Font Awesome en una aplicación de React

Generalmente, los íconos vienen en un color suave y un tamaño básico que tal vez no sea el adecuado para tu página. Así que tendrás que modificar sus estilos para ajustarlos a tus preferencias.

Los íconos de 'react-icons' son muy fáciles de modificar. Puedes usar los siguientes estilos para estilizar un ícono de 'react-icons':

Estilos en línea (Inline styles)
Modificar su tamaño con etiquetas HTML para encabezados (HTML heading tags)
Objetos de estilo (Object styles)
Hoja de estilos en cascada (CSS stylesheet)
Contexto del ícono (Icon context)

Cómo utilizar estilos en línea para estilizar íconos (Inline Styles)

Puedes estilizar un 'react-icon' usando estilos en línea con CSS. Esto significa que aplicarás los estilos dentro de la etiqueta que abre y cierra el elemento.

Usa este método solamente cuando tienes uno o dos íconos por estilizar. También puedes usarlo cuando necesites íconos con diferentes estilos. Mira el código de ejemplo a continuación:

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={{color: 'red', fontSize: '50px'}}/>
      <FaRegHeart style={{color: 'green', fontSize: '50px'}}/>
    </div>
    ) 
  }
}

export default Like

twoColoredHearts — Corazones de Font Awesome coloreados

Como ves en el ejemplo anterior, estamos pasando el color y el tamaño de fuente (fontSize) a la propiedad style. El primer ícono es un rojo sólido. El segundo ícono tiene su contorno en verde.

Ten en cuenta que el tamaño de fuente está escrito en camel case (camelCase). Las propiedades de CSS con dos palabras se escriben en camel case en lugar de usar el - para separarlas cuando las usamos en JS vanilla. Esta es la convención en React.

Cómo cambiar el tamaño de los íconos con etiquetas de encabezado de HTML

También puedes usar etiquetas de encabezado de HTML para hacer que tus íconos tengan el mismo tamaño que el que le corresponde a la etiqueta que has usado.

Para hacer esto, agrega el elemento de ícono en medio de las etiquetas de apertura y cierre del encabezado.

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

class Like extends Component {
  render() {
    return (
    <div>
      <h1><FaHeart style={{color: 'red'}}/></h1>
 	  <h6><FaRegHeart style={{color: 'green'}}/></h6>
    </div>
    ) 
  }
}

export default Like

En el código anterior hemos añadido dos íconos en medio de etiquetas de encabezado de HTML respectivamente.

Cómo estilizar íconos con objetos de estilo (Object Styles)

Puedes almacenar y usar los estilos que quieras para tus íconos en una variable como propiedades de un objeto. Simplemente, declara un objeto y asigna en él todos los estilos que quieras para los íconos.

Usa este método cuando tienes varios estilos por aplicar a los íconos. También puedes usar este estilo cuando estás apuntando a un ícono en específico. Revisa el siguiente ejemplo:

Código de ejemplo

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';

const fontStyles = {color: 'blue', fontSize: '80px'};

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart style={fontStyles}/>
      <FaRegHeart style={fontStyles}/>
    </div>
    ) 
  }
}

export default Like

En el código de ejemplo anterior, almacenamos los estilos que queríamos en un objeto. Luego pasamos el objeto como valor a la propiedad style en el ícono.

Todos los íconos que reciben el objeto de estilos tendrán el mismo estilizado. Así que en el ejemplo anterior, ambos íconos tendrán el mismo color azul y un tamaño de 80px.

Cómo estilizar íconos con hojas de estilo en cascada (CSS stylesheets)

También puedes usar una hoja de estilos (CSS Stylesheet) para estilizar tus íconos. Usar una hoja de estilos es la forma más adecuada cuando tienes múltiples estilos e íconos por incorporar a tu aplicación.

Para usar una hoja de estilos, tienes que importar la hoja de estilos en el archivo donde vas a usar los íconos. Pasa una clase a los elementos de ícono que desees. Estiliza los elementos ícono usando la clase en la hoja de estilos. Revisa el siguiente código de ejemplo:

Código de ejemplo

//style.css file
.yellow{
font-size: 80px;
color: yellow
}

.purple{
font-size: 80px;
color: purple
}

import React, { Component } from 'react';
import { FaHeart, FaRegHeart } from 'react-icons/fa';
import "./style.css";

class Like extends Component {
  render() {
    return (
    <div>
      <FaHeart className='yellow'/>
       <FaRegHeart className='purple'/>
    </div>
    ) 
  }
}

export default Like

YellowAndPurpleHearts-1 — Íconos amarillo y púrpura

El código de ejemplo muestra una hoja de estilos CSS con estilos sobre dos clases. Importamos esta hoja de estilos en nuestro archivo de React. Pasamos esas clases a los estilos sobre los elementos de React donde los queremos.

Cómo estilizar íconos usando el contexto del ícono

También puedes importar el contexto de íconos de 'react-icons' en lugar de agregar múltiples nombres de clases en diferentes íconos. Así puedes darle al contexto los valores que desees. Agrega los elementos de ícono dentro del contexto como se muestra a continuación:

Código de ejemplo

import React from 'react';
import { IconContext } from "react-icons";

const Like = () => {
  return (
    <IconContext.Provider
      value={{style: { color: '#f4a200', fontSize: '50px' }}}
    >
      <div>
        <FaHeart />
        <FaRegHeart />
      </div>
    </IconContext.Provider>
  );
}
 
export default Like;

Two-YellowHearts — Dos corazones amarillos en línea

En el código de ejemplo, importamos el contexto de íconos de 'react-icons'. Luego usamos una función sin manejo de estado para renderizar los íconos dentro del contexto de íconos.

Observa que el contexto de íconos le ha dado a los íconos una presentación en línea (display: inline;) por defecto. Si quieres que los íconos se mantengan con una presentación en bloque, entonces agrega display: 'block' como una de las propiedades. En otras palabras, puedes pasar cualquier estilo que quieras para las fuentes en la etiqueta del contexto de íconos.

Código para importar todas las librerías de íconos de 'react-icons'

En caso de que quieras usar íconos de otras librerías (además de aquellas que hemos discutido aquí), aquí están sus códigos de importación para que puedas acceder a ellas rápidamente:

import { IconName } from "react-icons/ai"; //Ant Design Icons
import { IconName } from "react-icons/bs"; //Bootstrap Icons
import { IconName } from "react-icons/bi"; //Boxicons
import { IconName } from "react-icons/di"; //Devicon Icons
import { IconName } from "react-icons/fi"; //Feather 
import { IconName } from "react-icons/fc"; //Flat Color Icons
import { IconName } from "react-icons/fa"; //Font Awesome Icons
import { IconName } from "react-icons/gi"; //Game Icons
import { IconName } from "react-icons/go"; //Github Octicons Icons
import { IconName } from "react-icons/gr"; //Grommet-Icons
import { IconName } from "react-icons/hi"; //HeroIcons
import { IconName } from "react-icons/im"; //IcoMoon Free
import { IconName } from "react-icons/io"; //Ionicon4
import { IconName } from "react-icons/io5"; //Ionicon5
import { IconName } from "react-icons/md"; //Material Design Icons
import { IconName } from "react-icons/ri"; //Remix Icons
import { IconName } from "react-icons/si"; //Simple Icons
import { IconName } from "react-icons/ti"; //Typicons
import { IconName } from "react-icons/vsc"; //VS Code Icons
import { IconName } from "react-icons/wi"; //Weather Icons
import { IconName } from "react-icons/cg"; //css.gg

Todas las librerías de íconos disponibles en la página de 'react-icons' se usan de la misma manera que describimos en este artículo.

Conclusión

Los íconos disponibles con 'react-icons' están altamente optimizados, son escalables y fáciles de usar. Espero haber podido ayudarte a aprender su funcionamiento básico para que puedas hacer uso de ellos. Puedes leer la documentación (en inglés) de 'react-icons' para aprender más.