Utilisez les icônes FontAwesome dans les applications React

Vous ne le réalisez peut-être pas, mais les icônes et les logos sont une partie essentielle des applications modernes. Lors de la création d’interfaces dans React, les développeurs peuvent utiliser de nombreux kits d’outils et packages différents contenant des icônes. FontAwesome est l’une des meilleures options car elle offre une grande variété d’icônes. L’équipe derrière FontAwesome s’est également efforcée d’intégrer les icônes dans l’écosystème React.

Utiliser FontAwesome dans React

Choisir une icône FontAwesome pour React

Une fois que vous avez déterminé le type d’icônes dont votre application a besoin, vous pouvez rechercher des mots-clés associés sur la page Font Awesome Icons pour trouver quelque chose qui vous convient. Les filtres que vous voyez sur le côté gauche sont essentiels pour affiner vos options. Ils peuvent vous aider à trouver exactement ce que vous recherchez et, plus important encore, vous dire quel package FontAwesome vous devez installer.

Pour installer des icônes standard, exécutez la commande suivante dans la ligne de commande :

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

Pour explorer tous les différents packages que vous pouvez installer, consultez ce guide.

Création d’une bibliothèque

Au fur et à mesure que votre application grandira, vous aurez besoin d’icônes dans de nombreux fichiers différents. Importer les mêmes icônes encore et encore peut être épuisant. Au lieu de cela, vous pouvez importer chaque icône dont vous avez besoin dans un fichier JavaScript, où vous créerez une bibliothèque FA.

Il est d’usage de stocker vos bibliothèques d’icônes dans le dossier src. La bibliothèque doit contenir toutes les icônes utilisées dans votre application React. Une fois cela fait, importez la bibliothèque dans un composant parent (généralement App.js) afin que tous les enfants y aient accès.

Voici à quoi ressemblerait une simple bibliothèque d’icônes :

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

library.add(
    faCoffee,
    faCheckSquare,
);

Utilisation de <FontAwesomeIcon/>

Le package react-fontawesome comprend un composant personnalisé <FontAwesomeIcon /> explicitement créé pour utiliser les icônes FA dans les applications React. L’approche des composants séparés peut vous apporter des gains de performances et minimiser la taille globale de l’ensemble.

Pour utiliser le composant <FontAwesomeIcon/>, vous devez installer le package react-fontawesome. Vous devrez également importer des icônes spécifiques. Par exemple, si vous comptez utiliser un logo Twitter, vous devrez importer l’icône faTwitter.

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

L’attribut icon est le plus important, mais d’autres attributs peuvent vous aider à personnaliser l’icône.

L’attribut size accepte de nombreuses valeurs différentes : sm pour petit, md pour moyen, lg pour grand et xl pour extra-large. Il accepte également les valeurs numériques, ce qui peut vous aider à mettre l’icône à l’échelle par rapport à sa taille standard. Vous pouvez utiliser des valeurs numériques entre les valeurs 2x et 6x pour agrandir l’icône en conséquence. Vous pouvez également utiliser des valeurs décimales. Vous pouvez également utiliser des styles en ligne pour modifier l’apparence du composant <FontAwesomeIcon />.

Utilisation de className

Si vous développez une application React à l’aide de la CLI create-react-app, vous pouvez utiliser l’attribut className pour afficher des icônes. Si vous venez d’autres frameworks ou langages, c’est probablement ainsi que vous êtes habitué à utiliser FontAwesome.

N’oubliez pas que dans la syntaxe JSX, vous devez utiliser l’attribut className, un peu comme le DOM normal. Ceci est nécessaire car la class en JavaScript est un mot réservé.

Une fois la bibliothèque font-awesome installée, vous devez l’importer dans le fichier index.js. Le dossier doit comprendre :

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

Une fois que vous avez importé les styles d’icônes, vous pouvez utiliser la syntaxe className standard dans JSX :

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