Utilisation du Font Awesome en React

Utilisation du Font Awesome en React

La première étape consiste à installer Font Awesome dans notre projet React

/* avec npm */
npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

/* avec yarn */
yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

La liste complète des icônes se trouve sur cette URL

Dans notre fichier app.js, on importe les font Awesome comme ça

/* DANS CETTE EXEMPLE ON VA UTILISER LE CHECK DU FONT AWESOME */

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

library.add(faCheck);

Ensuite dans notre component, on peut mettre celle la

/* ON DOIT IMPORTER FONT AWESOME */
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

/* DANS LE RENDER ON PEUT UTILISER FONT AWESOME */
<FontAwesomeIcon icon="check" />