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.

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 :

• Node.js installé localement, ce que vous pouvez faire en suivant Comment installer Node.js et créer un environnement de développement local.
• Créez React App que vous pouvez faire en suivant Comment mettre en place un projet React.

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

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.

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 :

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 :

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.

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 :

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

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 :

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 :

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.

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 :

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

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

É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.