Utilice iconos FontAwesome en aplicaciones React

Puede que no te des cuenta, pero los iconos y logotipos son una parte esencial de las aplicaciones modernas. Al crear interfaces en React, los desarrolladores pueden usar muchos kits de herramientas y paquetes diferentes que contienen íconos. FontAwesome es una de las mejores opciones porque ofrece una amplia variedad de iconos. El equipo detrás de FontAwesome también hizo un esfuerzo por integrar los íconos en el ecosistema React.

Usando FontAwesome en React

Elegir un ícono de FontAwesome para React

Una vez que haya determinado qué tipo de iconos necesita su aplicación, puede buscar palabras clave relacionadas en la página Font Awesome Icons para encontrar algo adecuado. Los filtros que ve en el lado izquierdo son esenciales para reducir sus opciones. Pueden ayudarlo a encontrar exactamente lo que está buscando y, lo que es más importante, decirle qué paquete de FontAwesome necesita instalar.

Para instalar iconos regulares, ejecute el siguiente comando en la línea de comandos:

npm install --save @fortawesome/free-regular-svg-icons

Para explorar todos los diferentes paquetes que puede instalar, consulte esta guía.

Creando una biblioteca

A medida que su aplicación crezca, necesitará iconos en muchos archivos diferentes. Importar los mismos iconos una y otra vez puede resultar agotador. En su lugar, puede importar todos los íconos que necesita en un archivo JavaScript, donde creará una biblioteca FA.

Es habitual almacenar sus bibliotecas de iconos en la carpeta src. La biblioteca debe contener todos los iconos utilizados en toda su aplicación React. Una vez hecho esto, importe la biblioteca en un componente principal (generalmente App.js) para que todos los niños tengan acceso a él.

Así es como se vería una biblioteca de iconos simple:

import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faCoffee,
    faCheckSquare,
);

Usando <FontAwesomeIcon/>

El paquete react-fontawesome incluye un componente personalizado <FontAwesomeIcon /> creado explícitamente para usar iconos FA en aplicaciones React. El enfoque de componentes separados puede brindarle ganancias de rendimiento y minimizar el tamaño general del paquete.

Para utilizar el componente <FontAwesomeIcon/>, debe instalar el paquete react-fontawesome. También necesitará importar íconos específicos. Por ejemplo, si va a utilizar un logotipo de Twitter, deberá importar el icono faTwitter.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

El atributo icono es el más importante, pero otros atributos pueden ayudarle a personalizar el icono.

El atributo size acepta muchos valores diferentes: sm para pequeño, md para mediano, lg para grande y xl para extragrande. También acepta valores numéricos, que pueden ayudarlo a escalar el icono en relación con su tamaño estándar. Puede utilizar valores numéricos entre valores 2x y 6x para agrandar el icono en consecuencia. También puede utilizar valores decimales. También puede utilizar estilos en línea para cambiar la apariencia del componente <FontAwesomeIcon />.

Usando className

Si está desarrollando una aplicación React usando la CLI create-react-app, puede usar el atributo className para mostrar iconos. Si viene de otros marcos o lenguajes, probablemente así es como está acostumbrado a usar FontAwesome.

No olvide que en la sintaxis JSX, debe usar el atributo className, al igual que DOM normal. Esto es necesario porque la clase en JavaScript es una palabra reservada.

Una vez que haya instalado la biblioteca font-awesome, debe importarla al archivo index.js. El archivo debe incluir:

import 'font-awesome/css/font-awesome.min.css';

Una vez que haya importado los estilos de iconos, puede usar la sintaxis normal de className en JSX:

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}