Après avoir lutté avec cela pendant un moment, j'ai proposé cette procédure (basée sur la documentation de Font Awesome ici ):
Comme indiqué, vous devrez installer la bibliothèque d'icônes fontawesome , react-fontawesome et fontawesome :
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome
puis importez tout dans votre application React:
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
Voici la partie délicate:
Pour modifier ou ajouter des icônes, vous devrez trouver les icônes disponibles dans votre bibliothèque de modules de nœuds, c'est-à-dire
<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons
Chaque icône a deux fichiers pertinents: .js et .d.ts, et le nom du fichier indique la phrase d'importation (assez évidente ...), donc l'ajout d' icônes de colère , de gemme et de coche ressemble à ceci:
import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
library.add(faStroopwafel, faAngry, faGem, faCheckCircle)
Pour utiliser les icônes dans votre code React js, utilisez:
<FontAwesomeIcon icon=icon_name/>
Le nom de l'icône se trouve dans le fichier .js de l'icône correspondante:
Par exemple, pour faCheckCircle, regardez dans faCheckCircle.js pour la variable ' iconName ':
...
var iconName = 'check-circle';
...
et le code React devrait ressembler à ceci:
<FontAwesomeIcon icon=check-circle/>
Bonne chance!
react-fontawesome
qui est v4, et d'autres au@fortawesome/fontawesome
composant officiel qui prend en charge la v5.