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

      Verwenden von Font Awesome 5 mit React


      Einführung

      Font Awesome ist ein Toolkit für Websites, das Symbole und soziale Logos zur Verfügung stellt. React ist eine Programmierbibliothek, die zur Erstellung von Benutzeroberflächen verwendet wird. Obwohl das Font Awesome-Team eine React-Komponente zur Förderung der Integration entwickelt hat, gibt es einige Grundlagen über Font Awesome 5 und seine Strukturierung zu verstehen. In diesem Tutorial erfahren Sie, wie Sie die Komponente React Font Awesome verwenden können.

      Font Awesome-Website mit ihren Symbolen

      Voraussetzungen

      Für dieses Tutorial ist keine Programmierung erforderlich. Wenn Sie jedoch mit einigen der Beispiele experimentieren möchten, benötigen Sie Folgendes:

      Schritt 1 – Verwenden von Font Awesome

      Das Font Awesome-Team hat eine React-Komponente erstellt, damit Sie beide zusammen verwenden können. Mit dieser Bibliothek können Sie dem Tutorial folgen, nachdem Sie Ihr Symbol ausgewählt haben.

      In diesem Beispiel verwenden wir das Home-Symbol und führen alles in der Datei App.js aus:

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

      Ihre Anwendung verfügt nun über ein kleines Home-Symbol. Sie werden feststellen, dass dieser Code nur das Home-Symbol auswählt, sodass nur ein Symbol zu unserer Bundle-Größe hinzugefügt wird.

      Code-Sandbox mit angezeigtem Home-Symbol

      Nun wird Font Awesome dafür sorgen, dass diese Komponente sich durch die SVG-Version dieses Symbols ersetzt, sobald diese Komponente installiert ist.

      Schritt 2 — Auswählen der Symbole

      Vor dem Installieren und Verwenden der Symbole ist es wichtig zu wissen, wie die Font Awesome Bibliotheken strukturiert sind. Da es viele Symbole gibt, hat das Team beschlossen, sie in mehrere Pakete aufzuteilen.

      Bei der Auswahl und Entscheidung über die gewünschten Symbole empfiehlt es sich, die Seite Font Awesome Icons zu besuchen, um Ihre Optionen zu erkunden. Auf der linken Seite der Seite sehen Sie verschiedene Filter, aus denen Sie auswählen können. Diese Filter sind sehr wichtig, da sie angeben, aus welchem Paket Ihr Symbol importiert werden soll.

      Im obigen Beispiel haben wir das Home-Symbol aus dem Paket @fortawesome/free-solid-svg-icons abgerufen.

      Bestimmen, zu welchem Paket ein Symbol gehört

      Sie können herausfinden, zu welchem Paket ein Symbol gehört, indem Sie sich die Filter auf der linken Seite ansehen. Sie können auch in ein Symbol klicken und das Paket sehen, zu dem es gehört.

      Sobald Sie wissen, zu welchem Paket eine Schriftart gehört, ist es wichtig, sich die dreibuchstabige Kurzform für dieses Paket zu merken:

      • Stil „Solid“ – fas
      • Stil „Regular“ – far
      • Stil „Light“ – fal
      • Stil „Duotone“ – fad

      Auf der Symbole-Seite können Sie nach einem bestimmten Typ suchen:

      Symbol-Seite mit einigen der Paketnamen auf der linken Seite

      Verwenden von Symbolen aus bestimmten Paketen

      Wenn Sie die Font Awesome Symbole-Seite durchblättern, werden Sie feststellen, dass es normalerweise mehrere Versionen desselben Symbols gibt. Sehen wir uns beispielsweise das Symbol boxing-glove an:

      Boxhandschuh-Symbol, drei verschiedene Versionen

      Um ein bestimmtes Symbol zu verwenden, müssen Sie <FontAwesomeIcon> anpassen. Im Folgenden werden mehrere Arten des gleichen Symbols aus verschiedenen Paketen angezeigt. Dazu gehören die bereits erwähnten dreibuchstabigen Kurzformen.

      Anmerkung: Die folgenden werden nicht funktionieren, bis wir in einigen Abschnitten eine Symbol-Bibliothek aufgebaut haben.

      Hier ist ein Beispiel für die „Solid“-Version:

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

      Wenn kein Typ angegeben ist, wird standardmäßig die „Solid“-Version verwendet:

      <FontAwesomeIcon icon={faCode} />
      

      Und die „Light“-Version, unter Verwendung von fal:

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

      Wir mussten unser icon-Prop zu einem Array statt einer einfachen Zeichenfolge ändern.

      Schritt 3 — Installieren von Font Awesome

      Da es mehrere Versionen eines Symbols, mehrerer Pakete und kostenlose/Pro-Pakete gibt, erfordert das Installieren aller mehr als ein npm-Paket. Möglicherweise müssen Sie mehrere installieren und dann die gewünschten Symbole auswählen.

      Für diesen Artikel installieren wir alles, damit wir zeigen können, wie mehrere Pakete installiert werden.

      Führen Sie den folgenden Befehl aus, um die Basispakete zu installieren:

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

      Führen Sie die folgenden Befehle aus, um die regulären Symbole zu installieren:

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

      Dadurch werden die „Solid“-Symbole (gefüllte Symbole) installiert:

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

      Verwenden Sie diesen Befehl für „Light“-Symbole (Symbole mit dünnem Rand):

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

      Dies installiert die „Duotone“-Symbole (Symbole mit zwei Farben):

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

      Zum Schluss installiert dies die Marken-Symbole:

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

      Oder, wenn Sie es vorziehen, alle auf einmal zu installieren, können Sie diesen Befehl verwenden, um die kostenlosen Symbol-Sätze zu installieren:

      • 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

      Wenn Sie ein Pro-Konto mit Font Awesome haben, können Sie den folgenden Befehl verwenden, um alle Symbole zu installieren:

      • 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

      Sie haben die Pakete installiert, aber sie noch nicht in Ihrer Anwendung verwendet oder zu unseren App-Bundles hinzugefügt. Sehen wir uns im nächsten Schritt an, wie Sie dies tun können.

      Schritt 4 — Erstellen einer Symbol-Bibliothek

      Es kann mühsam sein, das gewünschte Symbol in mehrere Dateien zu importieren. Angenommen, Sie verwenden das Twitter-Logo an mehreren Stellen, dann wollen Sie das nicht mehrfach schreiben müssen.

      Um alles an einem Ort zu importieren, anstatt jedes Symbol in jede separate Datei zu importieren, erstellen wir eine Font Awesome Bibliothek.

      Erstellen wir fontawesome.js im Ordner src und importieren diese dann in index.js. Es steht Ihnen frei, diese Datei an beliebiger Stelle hinzuzufügen, solange die Komponenten, in denen Sie die Symbole verwenden möchten, Zugriff haben (untergeordnete Komponenten sind). Sie können dies sogar direkt in Ihrer index.js oder App.js tun. Es kann jedoch besser sein, dies in eine separate Datei auszulagern, da es groß werden kann:

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

      Wenn Sie dies in einer eigenen Datei getan haben, müssen Sie in index.js importieren:

      src/index.js

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

      Importieren eines kompletten Symbol-Pakets

      Das Importieren eines kompletten Pakets wird nicht empfohlen, da Sie jedes einzelne Symbol in Ihre Anwendung importieren, wodurch ein großes Bundle entstehen kann. Wenn Sie ein komplettes Paket importieren müssen, können Sie dies selbstverständlich tun.

      Nehmen wir in diesem Beispiel an, Sie wollen alle Marken-Symbole in @fortawesome/free-brands-svg-icons haben. Um das komplette Paket zu importieren, würden Sie Folgendes verwenden:

      src/fontawesome.js

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

      fab repräsentiert das gesamte Markensymbol-Paket.

      Importieren einzelner Symbole

      Es wird empfohlen, die Symbole von Font Awesome einzeln zu importieren, damit Ihre endgültigen Bundle-Größen so klein wie möglich sind, da Sie nur das importieren, was Sie benötigen.

      Auf diese Weise können Sie eine Bibliothek aus mehreren Symbolen aus den verschiedenen Paketen erstellen:

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

      Importieren desselben Symbols aus mehreren Stilen

      Wenn Sie alle Arten von boxing-glove für die Pakete fal, far und fas wünschen, können Sie sie alle unter einem anderen Namen importieren und dann hinzufügen.

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

      Sie können sie dann verwenden, indem Sie die verschiedenen Präfixe implementieren:

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

      Schritt 5 — Verwenden von Symbolen

      Nachdem Sie nun alles Notwendige installiert haben und Ihre Symbole zu Ihrer Font Awesome Bibliothek hinzugefügt haben, können Sie sie verwenden und Größen zuweisen. In diesem Tutorial verwenden wir das Paket „light“ (fal).

      Dieses erste Beispiel verwendet die normale Größe:

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

      Das zweite Beispiel kann benannte Größenanpassung verwenden, wobei Abkürzungen für klein (sm), mittel (md), groß (lg) und extragroß (xl) verwendet werden:

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

      Die dritte Möglichkeit ist die Verwendung der nummerierten Größenanpassung, die bis zu 6 gehen kann:

      <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" />
      

      Wenn Sie die nummerierte Größenanpassung verwenden, können Sie auch Dezimalzahlen verwenden, um die perfekte Größe zu finden:

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

      Font Awesome formatiert die von ihm verwendeten SVGs, indem es die Textfarbe der CSS übernimmt. Wenn Sie ein Tag <p> an der Stelle platzieren würden, an der das Symbol erscheinen soll, wäre die Farbe des Absatzes die Farbe des Symbols:

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

      Font Awesome verfügt auch über eine Power Transforms-Funktion, mit der Sie verschiedene Transformationen aneinander reihen können:

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

      Sie können jede der Transformationen verwenden, die auf der Website Font Awesome zu finden sind. Damit können Sie Symbole nach oben, unten, links oder rechts verschieben, um eine perfekte Positionierung neben dem Text oder innerhalb von Schaltflächen zu erzielen.

      Symbole mit fester Breite

      Wenn Symbole an einer Stelle verwendet werden, an der sie alle gleich breit und einheitlich sein müssen, können wir mit Font Awesome das Prop fixedWidth verwenden. Nehmen wir zum Beispiel an, dass Sie feste Breiten für Ihre Navigation-Dropdown-Liste benötigen:

      Scotch Website mit Menü-Dropdown und „Courses“ hervorgehoben

      <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 />
      

      Sich drehende Symbole

      Das Implementieren von sich drehenden Symbolen auf Formularschaltflächen ist hilfreich, wenn ein Formular verarbeitet wird. Sie können das Dreh-Symbol verwenden, um einen schönen Ladeeffekt zu erzielen:

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

      Sie können das Prop spin auf allem Möglichen verwenden!

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

      Erweitert: Maskierende Symbole

      Mit Font Awesome können Sie zwei Symbole kombinieren, um Effekte mit Maskierung zu erzielen. Sie definieren Ihr normales Symbol und verwenden dann das Prop mask, um ein zweites Symbol zu definieren, das darüber gelegt wird. Das erste Symbol wird innerhalb des Maskierungssymbols beschränkt.

      In diesem Beispiel haben wir Tag-Filter mit Maskierung erstellt:

      Tag-Filter mit Font Awesome

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

      Beachten Sie, wie Sie mehrere Props transform aneinanderketten können, um das innere Symbol so zu verschieben, dass es in das Maskierungssymbol passt.

      Wir färben und ändern mit Font Awesome sogar das Hintergrundlogo:

      Erneut die Tag-Filter, aber jetzt mit einem blauen Hintergrund

      Schritt 6 — Verwenden von react-fontawesome und Symbolen außerhalb von React

      Wenn Ihre gesamte Website keine einseitige Anwendung (Single Page Application, SPA) ist und Sie stattdessen eine traditionelle Website und React darüber hinzugefügt haben. Um den Import der SVG/JS-Hauptbibliothek und auch der Bibliothek react-fontawesome zu vermeiden, hat Font Awesome eine Möglichkeit geschaffen, die React-Bibliotheken zu verwenden, um auf Symbole außerhalb der React-Komponenten zu achten.

      Wenn Sie eine <i class="fas fa-stroopwafel"></i> haben, können wir Font Awesome mit dem Folgenden anweisen, diese zu überwachen und zu aktualisieren:

      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 ist eine Webtechnologie, die es uns ermöglicht, DOM auf Änderungen performant zu überwachen. Weitere Informationen über diese Technik finden Sie in den Dokumenten zu React Font Awesome.

      Zusammenfassung

      Die gemeinsame Verwendung von Font Awesome und React ist eine großartige Kombination, macht es jedoch erforderlich, mehrere Pakete zu verwenden und verschiedene Kombinationen zu berücksichtigen. In diesem Tutorial haben Sie einige der Möglichkeiten untersucht, wie Sie Font Awesome und React zusammen verwenden können.



      Source link

      Comment utiliser Font Awesome 5 avec React


      Introduction

      Font Awesome est un kit d’outils destiné aux sites web qui propose des icônes et des logos sociaux. React est une bibliothèque de codage utilisée pour la création d’interfaces utilisateur. Bien que l’équipe de Font Awesome ait créé un composant React pour promouvoir l’intégration, il y a quelques éléments fondamentaux à comprendre au sujet de Font Awesome 5 et de sa structure. Dans ce tutoriel, vous découvrirez comment utiliser le composant React Font Awesome.

      Site web Font Awesome avec ses icônes

      Conditions préalables

      Aucun codage n’est nécessaire pour ce tutoriel, mais si vous souhaitez expérimenter avec certains des exemples, vous aurez besoin de ce qui suit :

      Étape 1 – Utiliser une police de caractères Awesome

      L’équipe de Font Awesome a créé un composant React afin que vous puissiez utiliser les deux ensemble. Avec cette bibliothèque, vous pouvez suivre le tutoriel après avoir sélectionné votre icône.

      Dans cet exemple, nous utiliserons l’icône home et ferons tout dans le fichier 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"));
      

      Votre application dispose maintenant d’une petite icône home Vous remarquerez que ce code ne sélectionne que l’icône homepour qu’une seule icône soit ajoutée à notre taille du paquet.

      code de bac à sable avec l'icône home se montrant

      Maintenant, Font Awesome va s’assurer que ce composant se remplacera par la version SVG de cette icône, une fois que ce composant sera monté.

      Étape 2 – Choisir des icônes

      Avant d’installer et d’utiliser les icônes, il est important de savoir comment les bibliothèques Font Awesome sont structurées.  Comme il y a beaucoup d’icônes, l’équipe a décidé de les diviser en plusieurs paquets.

      Pour choisir les icônes que vous souhaitez, il est recommandé de visiter la page des icônes de Font Awesome pour parcourir vos options. Vous verrez différents filtres à choisir le long du côté gauche de la page. Ces filtres sont très importants car ils indiqueront de quel paquet importer votre icône.

      Dans l’exemple ci-dessus, nous avons tiré le l’icône home du paquet @fortawesome/free-solid-svg-icons.

      Déterminer à quel paquet une icône appartient

      Vous pouvez déterminer à quel paquet appartient une icône en examinant les filtres sur la gauche.  Vous pouvez également cliquer sur une icône et voir le paquet auquel elle appartient.

      Une fois que vous savez à quel paquet appartient une police, il est important de se souvenir de l’abréviation de trois lettres de ce paquet :

      • Solid Style – fas
      • Regular Style – far
      • Light Style – fal
      • Duotone Style – fad

      Vous pouvez rechercher un type spécifique à partir de la page des icônes :

      page des icônes avec certains des noms de paquets sur la gauche

      Utiliser des icônes de paquets spécifiques

      Si vous parcourez la page des icônes de Font Awesome, vous remarquerez qu’il existe généralement plusieurs versions d’une même icône. Par exemple, examinons l’icône boxing-glove :

      icône boxing glove trois versions différentes

      Pour utiliser une icône spécifique, vous devrez ajuster <FontAwesomeIcon>. Vous trouverez ci-dessous plusieurs types de la même icône provenant de différents paquets.  Il s’agit notamment des abréviations de trois lettres dont nous avons parlé plus haut.

      Remarque : Les exemples suivants ne fonctionneront pas tant que nous n’aurons pas construit une bibliothèque d’icônes en quelques sections.

      Voici un exemple de la version solide :

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

      Par défaut, il s’agit de la version solid si un type n’est pas spécifié :

      <FontAwesomeIcon icon={faCode} />
      

      Et la version light en utilisant fal :

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

      Nous avons dû changer notre support d’icône pour en faire un tableau au lieu d’une simple chaîne.

      Étape 3 – Installer la police de caractères Awesome

      Comme il existe plusieurs versions d’une icône, plusieurs paquets et des paquets free/pro, leur installation implique plus d’un paquet npm.  Vous devrez peut-être en installer plusieurs, puis choisir les icônes que vous souhaitez.

      Pour cet article, nous allons tout installer afin de pouvoir démontrer comment installer plusieurs paquets.

      Exécutez la commande suivante pour installer les paquets de base :

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

      Exécutez les commandes suivantes pour installer les icônes regular:

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

      Ces dernières installeront les icônes solid :

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

      Utilisez cette commande pour obtenir des icônes light :

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

      Vous installerez les icônes duotone :

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

      Enfin, cela permettra d’installer des icônes de marque :

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

      Ou, si vous préférez les installer tous en une seule fois, vous pouvez utiliser cette commande pour installer les jeux d’icônes gratuits :

      • 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 vous avez un compte pro avec Font Awesome, vous pouvez utiliser ce qui suit pour installer toutes les icônes :

      • 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

      Vous avez installé les paquets mais ne les avez pas encore utilisés dans votre application ou ne les avez pas encore ajoutés à nos paquets d’applications.  Voyons comment vous pouvez faire cela dans la prochaine étape.

      Étape 4 – Créer une bibliothèque d’icônes

      Il peut être fastidieux d’importer l’icône que vous souhaitez dans plusieurs fichiers.  Supposons que vous utilisiez le logo Twitter à plusieurs endroits ; vous ne voulez pas avoir à l’écrire plusieurs fois.

      Pour tout importer au même endroit, au lieu d’importer chaque icône dans un fichier séparé, nous allons créer une bibliothèque Font Awesome.

      Créons fontawesome.js dans le src puis importons-le dans le dossier index.js. N’hésitez pas à ajouter ce fichier où que ce soit, tant que les composants dans lesquels vous voulez utiliser les icônes y ont accès (sont des composants children). Vous pourriez même le faire dans votre index.js ou App.js. Toutefois, il peut être préférable de le transférer dans un fichier séparé, car il peut devenir volumineux :

      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 vous avez fait cela dans son propre dossier, vous devrez alors importer dans 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'));
      

      Importer un ensemble complet d’icônes

      Il n’est pas recommandé d’importer un paquet entier parce que vous importez chaque icône dans votre application, ce qui pourrait entraîner une taille de paquet importante.  Si vous avez besoin d’un paquet complet, vous pouvez certainement le faire.

      Dans cet exemple, supposons que vous vouliez que toutes les icônes de la marque soient @fortawesome/free-brands-svg-icons. Vous utiliserez les éléments suivants pour importer l’ensemble du paquet :

      src/fontawesome.js

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

      fab représente l’ensemble des icônes de la marque.

      Importer des icônes individuellement

      La façon recommandée d’utiliser les icônes Font Awesome est de les importer une par une afin que la taille finale de votre paquet soit la plus petite possible, car vous n’importerez que ce dont vous avez besoin.

      Vous pouvez ainsi créer une bibliothèque à partir de plusieurs icônes provenant des différents paquets :

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

      Importer la même icône à partir de plusieurs styles

      Si vous voulez tous les types de boxing-glove pour les paquets fal, far et fas, vous pouvez les importer tous sous un nom différent et les ajouter ensuite.

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

      Vous pouvez ensuite les utiliser en mettant en œuvre les différents préfixes :

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

      Étape 5 – Utiliser des icônes

      Maintenant que vous avez installé ce dont vous avez besoin et que vous avez ajouté vos icônes à votre bibliothèque Font Awesome, vous êtes prêt à les utiliser et à leur attribuer des tailles.  Dans ce tutoriel, nous utiliserons le paquet light (fal).

      Ce premier exemple utilisera la taille normale :

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

      Le second exemple peut utiliser un dimensionnement nommé qui utilise des abréviations pour petite (sm), moyenne (md), grande (lg) et extra-large (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 troisième option consiste à utiliser un dimensionnement numéroté qui peut aller jusqu’à 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" />
      

      Lorsque vous utilisez la taille numérotée, vous pouvez également utiliser des décimales pour trouver la taille parfaite :

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

      Font Awesome stylise les SVG qu’il utilise en empruntant la couleur text-color du CSS.  Si vous deviez placer une balise <p> à l’endroit où doit aller cette icône, la couleur du paragraphe serait la couleur de l’icône :

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

      Font Awesome dispose également d’une fonction power transforms qui permet d’enchaîner différentes transformations :

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

      Vous pouvez utiliser n’importe laquelle des transforms trouvées sur le site Font Awesome. Vous pouvez utiliser cette fonction pour déplacer les icônes vers le haut, le bas, la gauche ou la droite afin d’obtenir un positionnement parfait à côté du texte ou à l’intérieur des boutons.

      Icônes de largeur fixe

      Lorsque nous utilisons des icônes à un endroit où elles doivent toutes avoir la même largeur et être uniformes, Font Awesome nous permet d’utiliser le support fixedWidth. Par exemple, disons que vous ayez besoin de largeurs fixes pour votre menu déroulant de navigation :

      Site web Scotch avec menu déroulant et « Courses » mis en surbrillance

      <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 />
      

      Icônes qui tournent

      La rotation est utile à mettre en œuvre sur les boutons de formulaire lorsqu’un formulaire est en cours de traitement. Vous pouvez utiliser l’icône spinner pour faire un bel effet de chargement :

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

      Vous pouvez utiliser le support spin sur n’importe quoi !

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

      Avancé : Masquer des icônes

      Font Awesome vous permet de combiner deux icônes pour faire des effets de masquage. Vous définissez votre icône normale et utilisez ensuite le masque pour définir une deuxième icône à poser sur le dessus. La première icône sera contenue dans l’icône de masquage.

      Dans cet exemple, nous avons créé des filtres de balises en utilisant la technique du masquage :

      Filtres de balises avec Font Awesome

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

      Remarquez comment vous pouvez enchaîner plusieurs supportstransforms pour déplacer l’icône intérieure afin qu’elle s’insère dans l’icône de masquage.

      Nous avons même colorié et changé le logo de fond avec Font Awesome :

      La balise filtre à nouveau, mais maintenant avec un fond bleu

      Étape 6 – Utiliser react-fontawesome et des icônes en dehors de React

      Si l’ensemble de votre site n’est pas une application d’une seule page (SPA), et qu’au lieu de cela vous avez un site traditionnel et que vous avez ajouté React en haut. . Pour éviter d’importer la bibliothèque principale SVG/JS et aussi la bibliothèque react-fontawesome, Font Awesome a créé un moyen d’utiliser les bibliothèques React pour surveiller les icônes en dehors des composants React.

      Si vous avez des <i class="fas fa-stroopwafel"></i>, nous pouvons dire à Font Awesome de les regarder et de les mettre à jour en utilisant ce qui suit :

      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
      

      Les MutationObserver sont une technologie web qui nous permet de surveiller le DOM de manière performante pour détecter les changements.  Pour en savoir plus sur cette technique, consultez les docs React Font Awesome.

      Conclusion

      Utiliser Font Awesome et React ensemble est une excellente combinaison, mais cela crée le besoin d’utiliser plusieurs paquets et d’envisager différentes combinaisons.  Dans ce tutoriel, vous avez exploré certaines des méthodes permettant d’utiliser Font Awesome et React ensemble.



      Source link