FontAwesome-Symbole in React-Anwendungen verwenden

Sie wissen es vielleicht nicht, aber Symbole und Logos sind ein wesentlicher Bestandteil moderner Anwendungen. Beim Erstellen von Schnittstellen in React können Entwickler viele verschiedene Toolkits und Pakete verwenden, die Symbole enthalten. FontAwesome ist eine der besten Optionen, da es eine Vielzahl von Symbolen bietet. Das Team hinter FontAwesome hat sich auch bemüht, die Icons in das React-Ökosystem zu integrieren.

Verwenden von FontAwesome in React

Auswahl eines FontAwesome-Symbols für React

Nachdem Sie festgelegt haben, welche Art von Symbolen Ihre Anwendung benötigt, können Sie auf der Seite Font Awesome Icons nach verwandten Schlüsselwörtern suchen, um etwas Passendes zu finden. Die Filter, die Sie auf der linken Seite sehen, sind wichtig, um Ihre Optionen einzugrenzen. Sie können Ihnen helfen, genau das zu finden, wonach Sie suchen, und, was noch wichtiger ist, Ihnen sagen, welches FontAwesome-Paket Sie installieren müssen.

Um normale Symbole zu installieren, führen Sie den folgenden Befehl in der Befehlszeile aus:

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

Um die verschiedenen Pakete zu erkunden, die Sie installieren können, sehen Sie sich diese Anleitung an.

Erstellen einer Bibliothek

Wenn Ihre Anwendung wächst, benötigen Sie Symbole in vielen verschiedenen Dateien. Immer wieder dieselben Icons zu importieren, kann anstrengend sein. Stattdessen können Sie jedes benötigte Symbol in eine JavaScript-Datei importieren, in der Sie eine FA-Bibliothek erstellen.

Es ist üblich, Ihre Symbolbibliotheken im Ordner src zu speichern. Die Bibliothek sollte alle Symbole enthalten, die in Ihrer React-Anwendung verwendet werden. Wenn Sie fertig sind, importieren Sie die Bibliothek in eine Elternkomponente (normalerweise App.js), damit alle Kinder darauf zugreifen können.

So würde eine einfache Symbolbibliothek aussehen:

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

library.add(
    faCoffee,
    faCheckSquare,
);

Verwendung von <FontAwesomeIcon/>

Das Paket react-fontawesome enthält eine benutzerdefinierte Komponente <FontAwesomeIcon />, die explizit für die Verwendung von FA-Symbolen in React-Anwendungen erstellt wurde. Der Ansatz mit separaten Komponenten kann Ihnen Leistungssteigerungen bieten und die Gesamtgröße des Pakets minimieren.

Um die Komponente <FontAwesomeIcon/> zu verwenden, müssen Sie das Paket react-fontawesome installieren. Sie müssen auch bestimmte Symbole importieren. Wenn Sie beispielsweise ein Twitter-Logo verwenden möchten, müssen Sie das Symbol faTwitter importieren.

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

Das Attribut icon ist das wichtigste, aber andere Attribute können Ihnen helfen, das Symbol anzupassen.

Das Attribut size akzeptiert viele verschiedene Werte – sm für klein, md für mittel, lg für gross und xl für extra gross. Es akzeptiert auch numerische Werte, die Ihnen helfen können, das Symbol relativ zu seiner Standardgröße zu skalieren. Sie können Zahlenwerte zwischen 2x und 6x verwenden, um das Symbol entsprechend zu vergrößern. Sie können auch Dezimalwerte verwenden. Sie können auch Inline-Stile verwenden, um das Aussehen der Komponente <FontAwesomeIcon /> zu ändern.

Verwendung von className

Wenn Sie eine React-Anwendung mit der CLI create-react-app entwickeln, können Sie das Attribut className verwenden, um Symbole anzuzeigen. Wenn Sie von anderen Frameworks oder Sprachen kommen, sind Sie wahrscheinlich so an die Verwendung von FontAwesome gewöhnt.

Vergessen Sie nicht, dass Sie in der JSX-Syntax das Attribut className verwenden müssen, ähnlich wie bei regulärem DOM. Dies ist notwendig, weil class in JavaScript ein reserviertes Wort ist.

Nachdem Sie die Bibliothek font-awesome installiert haben, müssen Sie diese in die Datei index.js importieren. Die Datei muss enthalten:

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

Nachdem Sie die Symbolstile importiert haben, können Sie die normale className-Syntax in JSX verwenden:

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