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.

Voraussetzungen

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

• Lokal installiertes Node.js. Folgen Sie hierfür Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung.
• Create React-App. Folgen Sie hierfür Einrichten eines React-Projekts.

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:

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.

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:

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:

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.

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:

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

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:

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:

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.

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:

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

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

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.