Utiliser Font Awesome dans votre projet Next.js
Publié le 6 mai 2024 par Pierre Guézennec
Font Awesome est une des librairies d'icônes les plus connues, les plus utilisées et les plus fournies... et peut être facilement intégrée au sein de Next.js après de petits ajustements. Les icônes sont particulièrement nombreuses et au format SVG.
Ce guide indique comment utiliser les icône de Font Awesome version 6 dans une application Next.js 14 avec l'App Router et TypeScript.
Installation des dépendances Font Awesome
Vous devez déjà installer quelques packages obligatoires :
- La librairie de base de Font Awesome : fontawesome-svg-core
- La librairie pour supporter Typescript : fontawesome-common-types
- La librarie React de Font Awesome : react-fontawesome
Ensuite, selon les icônes à utiliser, vous aurez besoin de quelques packages supplémentaires :
- Icônes solid : free-solid-svg-icons
- Icônes regular : free-regular-svg-icons
- Icônes brand : free-brands-svg-icons
Si vous souhaitez utiliser les icônes pro (payantes) de Font Awesome, référez-vous à la documentation et à votre compte pour récupérer votre token et installer les packages pro.
Pour les icônes gratuites, installons déjà tous les packages listés ci-dessus, en une seule commande :
1npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/fontawesome-common-types @fortawesome/react-fontawesome@latest
Ajustement de votre code Next.js
Font Awesome a quelques subtilités pour fonctionner au sein de Next.js, résidant essentiellement dans le besoin d'ajouter le fichier de styles manuellement, et de désactiver son ajout automatique en conséquence.
Pour cela, nous allons ajouter, dans le fichier layout.tsx
à la racine de votre application Next.js (dans le dossier app
), les lignes suivantes, avec la liste des imports :
1import { config } from '@fortawesome/fontawesome-svg-core'
2import '@fortawesome/fontawesome-svg-core/styles.css'
3config.autoAddCss = false
Et voilà, c'est tout !
Utilisation des icônes Font Awesome dans Next.js
Pour utiliser les icônes Font Awesome dans vos pages et composants Next.js, il suffit d'utiliser les composants React fournis par Font Awesome dans les packages installés précédemment :
1import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2import { faWineBottle } from "@fortawesome/free-solid-svg-icons";
1<FontAwesomeIcon icon={faWineBottle} />
Cela ajoutera un SVG au sein de votre code, qui suivra le style CSS hérité notamment pour la couleur et la taille du texte, auquel vous pouvez ajouter un attribut className
pour plus de personnalisation.
Notez que vous pouvez utiliser, comme attribut icon
du composant FontAwesomeIcon
, une string comme "fa-wine-bottle"
avec minuscules et des tirets, ou directement un composant React comme {faWineBottle}
en camelCase.
Vous pouvez vous référer à la documentation React de Font Awesome pour utiliser toutes les fonctionnalités disponibles :
- Taille
- Largeur fixe
- Listes
- Rotation et retournement
- Animations (spinner, bounce, fade...)
- Bordures
- Layers
- ...
Par exemple, pour ajouter une icône d'un poisson rouge qui rebondit avec largeur fixe, avec une classe Tailwind CSS :
1import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2import { faFishFins } from "@fortawesome/free-solid-svg-icons";
1<FontAwesomeIcon icon={faFishFins} fixedWidth bounce className="text-red-500" />