Introducción

Font Awesome es un kit de herramientas para sitios web que proporciona iconos y logotipos de redes sociales. React es una biblioteca de codificación que se utiliza para crear interfaces de usuario. Aunque el equipo de Font Awesome ha creado un componente React para promover la integración, existen algunos fundamentos para comprender Font Awesome 5 y cómo se estructura. En este tutorial explorará cómo usar el componente React Font Awesome.

Requisitos previos

No es necesario trabajar con código para este tutorial, pero si está interesado en experimentar con algunos de los ejemplos, necesitará lo siguiente:

• Node.js se instala localmente, lo que puede hacer siguiendo Cómo instalar Node.jso y crear un entorno de desarrollo local.
• Cree una aplicación React, que puede hacer siguiendo Cómo configurar un proyecto React.

Paso 1: Usar Font Awesome

El equipo de Font Awesome creó un componente React, de forma que puede usarlos juntos. Con esta biblioteca, puede seguir el tutorial tras seleccionar su icono.

En este ejemplo, usaremos el icono home y haremos todo en el archivo App.js:

src/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"));

Copy

Su aplicación ahora tiene un pequeño icono de inicio. Observará que este código solo selecciona el icono de inicio para que solo se añada un icono a nuestro tamaño del paquete.

Ahora, Font Awesome se asegurará de que este componente se sustituya con la versión SVG de ese icono una vez que se monta este componente.

#react native