One place for hosting & domains

      Cómo usar Font Awesome 5 con React


      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.

      Sitio web Font Awesome con sus iconos

      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:

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

      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.

      code sandbox mostrando el icono de inicio

      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.

      Paso 2: Seleccionar iconos

      Antes de instalar y usar los iconos, es importante saber cómo se estructuran las bibliotecas de Font Awesome. Ya que hay muchos iconos, el equipo decidió dividirlos en varios paquetes.

      Cuando elija qué iconos quiere, se recomienda que visite la página de iconos de Font Awesome para explorar sus opciones. Verá diferentes filtros para elegir en el lado izquierdo de la página. Estos filtros son muy importantes porque indicarán qué desde qué paquete importar su icono.

      En el ejemplo anterior, sacamos el icono de inicio del paquete @fortawesome/free-solid-svg-icons.

      Determinar a qué paquete pertenece un icono

      Puede averiguar a qué paquete pertenece un icono revisando los filtros a la izquierda. También puede hacer clic en un icono y ver el paquete al que pertenece.

      Una vez que sepa a qué paquete pertenece una fuente, es importante recordar la abreviatura de tres letras para ese paquete:

      • Estilo sólido: fas
      • Estilo regular: far
      • Estilo ligero: fal
      • Estilo duotono: fad

      Puede buscar un tipo específico desde la página de iconos:

      página de iconos con algunos de los nombres del paquete a la izquierda

      Usar iconos de paquetes específicos

      Si examina la página de iconos de Font Awesome, observará que hay varias versiones del mismo icono. Por ejemplo, vamos a echar un vistazo al icono boxing-glove:

      tres versiones diferentes del icono de guante de boxeo

      Para usar un icono específico necesitará ajustar <FontAwesomeIcon> A continuación hay múltiples tipos del mismo icono de diferentes paquetes. Estos incluyen las abreviaturas de tres letras explicadas anteriormente.

      Nota: Los siguientes ejemplos no funcionarán hasta que creemos una biblioteca de iconos en algunas secciones.

      Aquí hay un ejemplo de una versión sólida:

      <FontAwesomeIcon icon={['fas', 'code']} />
      

      Esto va por defecto a la versión sólida si no se especifica un tipo:

      <FontAwesomeIcon icon={faCode} />
      

      Y la versión ligera usando fal:

      <FontAwesomeIcon icon={['fal', 'code']} />;
      

      Hemos tenido que cambiar nuestro prop icono para que sea una matriz en vez de una cadena sencilla.

      Paso 3 – Instalar Font Awesome

      Ya que hay múltiples versiones de un icono, paquetes múltiples y paquetes gratuitos/profesionales, instalarlos todos implica más de un paquete npm. Es posible que necesite instalar múltiples y luego elegir los iconos que desea.

      Para este artículo, instalaremos todo para demostrar cómo instalar múltiples paquetes.

      Luego, ejecute el siguiente comando para instalar los paquetes básicos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

      Ejecute los siguientes comandos para instalar los iconos regulares:

      • # regular icons
      • npm i -S @fortawesome/free-regular-svg-icons
      • npm i -S @fortawesome/pro-regular-svg-icons

      Estos instalarán los iconos sólidos:

      • # solid icons
      • npm i -S @fortawesome/free-solid-svg-icons
      • npm i -S @fortawesome/pro-solid-svg-icons

      Utilice este comando para los iconos ligeros:

      • # light icons
      • npm i -S @fortawesome/pro-light-svg-icons

      Esto instalará iconos duotone:

      • # duotone icons
      • npm i -S @fortawesome/pro-duotone-svg-icons

      Finalmente, esto instalará los iconos de marca:

      • # brand icons
      • npm i -S @fortawesome/free-brands-svg-icons

      O, si prefiere instalarlos todos a la vez, puede usar este comando para instalar los conjuntos de iconos gratuitos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

      Si tiene una cuenta profesional con Font Awesome, puede usar lo siguiente para instalar todos los iconos:

      • npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

      Ha instalado los paquetes pero no los ha usado aún en su aplicación ni los ha añadido aún a los paquetes de nuestra aplicación. Vamos a ver cómo puede hacer eso en el siguiente paso.

      Paso 4: Crear una biblioteca de iconos

      Puede ser tedioso importar el icono que desea en varios archivos. Digamos que usa el logotipo de Twitter en varios lugares, y no quiere escribir eso varias veces.

      Para importar todo en un único lugar, en vez de importar cada icono en un archivo independiente, crearemos una biblioteca de Font Awesome.

      Vamos a crear fontawesome.js en la carpeta src y luego importar eso en index.js. Puede añadir este archivo en cualquier lugar siempre que los componentes en los que desea usar los iconos tengan acceso (sean componentes secundarios). Incluso podría hacer esto en su index.js o App.js. Sin embargo, puede ser mejor mover esto a un archivo independiente ya que puede ser grande:

      src/fontawesome.js

      // import the library
      import { library } from '@fortawesome/fontawesome-svg-core';
      
      // import your icons
      import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
      import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';
      
      library.add(
        faMoneyBill,
        faCode,
        faHighlighter
        // more icons go here
      );
      

      Si hizo esto en su propio archivo, necesitará importar a index.js:

      src/index.js

      import React from 'react';
      import { render } from 'react-dom';
      
      // import your fontawesome library
      import './fontawesome';
      
      render(<App />, document.getElementById('root'));
      

      Importar un paquete de iconos entero

      No se recomienda importar un paquete entero porque está importando todos los iconos a su aplicación, lo que podría causar un tamaño grande del paquete. Si necesita importar un paquete entero, puede hacerlo sin duda.

      En este ejemplo, digamos que quería todos los iconos de marca en @fortawesome/free-brands-svg-icons. Usaría lo siguiente para importar todo el paquete:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { fab } from '@fortawesome/free-brands-svg-icons';
      
      library.add(fab);
      

      fab representa todo el paquete de iconos de marcas.

      Importar iconos individualmente

      La forma recomendada de usar los iconos de Font Awesome es importarlos uno a uno de forma que el tamaño de sus paquetes sea lo más pequeño posible, ya que solo importará lo que necesita.

      Puede crear una biblioteca de múltiples iconos de diferentes paquetes, de esta forma:

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      
      import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
      import { faImages } from '@fortawesome/pro-solid-svg-icons';
      import {
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      } from '@fortawesome/free-brands-svg-icons';
      
      library.add(
        faUserGraduate,
        faImages,
        faGithubAlt,
        faGoogle,
        faFacebook,
        faTwitter
      );
      

      Importar el mismo icono desde múltiples estilos

      Si desea todos los tipos de boxing-glove para los paquetes fal, far y fas, puede importarlos todos con un nombre diferente y añadirlos.

      src/fontawesome.js

      import { library } from '@fortawesome/fontawesome-svg-core';
      import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveRegular
      } from '@fortawesome/pro-regular-svg-icons';
      import {
        faBoxingGlove as faBoxingGloveSolid
      } from '@fortawesome/pro-solid-svg-icons';
      
      library.add(
          faBoxingGlove,
          faBoxingGloveRegular,
          faBoxingGloveSolid
      );
      

      Más tarde podrá usarlos implementando los diferentes prefijos:

      <FontAwesomeIcon icon={['fal', 'boxing-glove']} />
      <FontAwesomeIcon icon={['far', 'boxing-glove']} />
      <FontAwesomeIcon icon={['fas', 'boxing-glove']} />
      

      Paso 5: Usar los iconos

      Ahora que ha instalado lo que necesita y ha añadido sus iconos a su biblioteca Font Awesome, está listo para usarlos y asignar tamaños. En este tutorial, usaremos el paquete (fal) ligero.

      Este primer ejemplo usaremos el tamaño normal:

      <FontAwesomeIcon icon={['fal', 'code']} />
      

      El segundo ejemplo puede usar named sizing que usa abreviaturas para pequeño (sm), medio (md), grande (lg) y extra grande (xl):

      <FontAwesomeIcon icon={['fal', 'code']} size="sm" />
      <FontAwesomeIcon icon={['fal', 'code']} size="md" />
      <FontAwesomeIcon icon={['fal', 'code']} size="lg" />
      <FontAwesomeIcon icon={['fal', 'code']} size="xl" />
      

      La tercera opción es usar el tamaño numerado que puede llegar a 6:

      <FontAwesomeIcon icon={['fal', 'code']} size="2x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="3x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="4x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="5x" />
      <FontAwesomeIcon icon={['fal', 'code']} size="6x" />
      

      Cuando se usa el tamaño numerado, puede usar también decimales para encontrar el tamaño perfecto:

      <FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />
      

      Font Awesome crea estilo para SVG y lo utiliza tomando el color del texto del CSS. Si fuese a colocar una etiqueta <p> donde iría este icono, el color del párrafo sería del color del icono:

      <FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />
      

      Font Awesome también tiene una función de transformaciones de potencia donde puede unir varias transformaciones diferentes:

      <FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />
      

      Puede usar cualquiera de las transformaciones en el sitio de Font Awesome. Puede usar esto para mover los iconos hacia arriba, hacia abajo, a la izquierda o ala derecha para posicionarlos perfectamente junto al texto o dentro de los botones.

      Iconos con ancho fijo

      Cuando utilice iconos en un lugar donde deben tener el mismo ancho y ser uniformes, Font Awesome nos permite usar el prop fixedWidth. Por ejemplo, digamos que necesita anchos fijos para su desplegable de navegación:

      Sitio web de Scotch con menú desplegable y

      <FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
      <FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />
      

      Iconos giratorios

      El giro es útil para implementar botones de formulario cuando se procesa un formulario. Puede usar el icono giratorio para crear un buen efecto de carga:

      <FontAwesomeIcon icon={['fal', 'spinner']} spin />
      

      Puede usar el prop spin en cualquier cosa.

      <FontAwesomeIcon icon={['fal', 'code']} spin />
      

      Avanzado: enmascarar iconos

      Font Awesome le permite combinar dos iconos para crear efectos con enmascaramiento. Define su icono normal y luego utiliza el prop mask para definir un segundo icono que poner encima. El primer icono estará limitado dentro del icono de enmascaramiento.

      En este ejemplo, creamos filtros de etiquetas usando el enmascaramiento:

      Filtros de etiqueta con Font Awesome

      <FontAwesomeIcon
        icon={['fab', 'javascript']}
        mask={['fas', 'circle']}
        transform="grow-7 left-1.5 up-2.2"
        fixedWidth
      />
      

      Observe cómo puede encadenar múltiples props transform para mover el icono interior para que se ajuste dentro del icono de enmascaramiento.

      Podemos incluso dar color y cambiar el logotipo en segundo plano con Font Awesome:

      El filtro Etiqueta de nuevo, pero ahora con un fondo azul

      Paso 6: Usar react-fontawesome e iconos fuera de React

      Si todo su sitio no es una aplicación de página única (SPA), y en vez de eso tiene un sitio web tradicional y ha añadido React encima. Para evitar importar la biblioteca SVG/JS principal y también la biblioteca react-fontawesome, Font Awesome ha creado una forma de usar las bibliotecas React para ver iconos fuera de los componentes de React.

      Si tiene algún <i class="fas fa-stroopwafel"></i>, podemos indicar a Font Awesome que observe y actualice esto usando lo siguiente:

      import { dom } from '@fortawesome/fontawesome-svg-core'
      
      dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver
      

      MutationObserver es una tecnología web que nos permite vigilar el DOM en busca de cambios de forma automática. Descubra más sobre esta técnica en los documentos de React Font Awesome.

      Conclusión

      Usar Font Awesome y React juntos es una excelente combinación, pero crea la necesidad de usar múltiples paquetes y considerar diferentes combinaciones. En este tutorial, exploró algunas de las formas de usar Font Awesome y React juntos.



      Source link