web-dev-qa-db-fra.com

Les polices Font Awesome 5 ne fonctionnent pas avec React (erreur "Icône introuvable")

J'essaie d'utiliser Font Awesome 5 Pro (j'ai une licence) dans mon projet React et j'ai suivi les instructions du API au mieux de mes capacités, mais je continue à avoir problèmes.

Dans mon projet, j'ai utilisé npm pour installer fontawesome, fontawesome-common-types, fontawesome-pro-light, fontawesome-pro-regular, fontawesome-pro-solid et réagit-fontawesome. Tous ces dossiers se trouvent dans mon répertoire node_modules/@ fortawesome /

Dans mon App.js, j'ai ces importations (il ne s'agit pas du fichier complet, mais uniquement des extraits pertinents):

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

Ensuite, j'ai un autre composant, Spinner.js, avec ce code:

import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

Dans un autre composant, j'importe le composant Spinner et je le restitue de manière conditionnelle. Toutefois, lorsqu'il est rendu, les erreurs suivantes apparaissent dans la console de mon navigateur:

Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

Je suis assez nouveau pour React, mais je pense que j'ai correctement suivi les instructions de l'API React de FontAwesome. Une idée où je pourrais me tromper?

javascriptreactjsfont-awesome
5
dannymcgee

Je l'ai compris!

Par défaut, le composant FontAwesomeIcon utilise le préfixe "fas" (pour Font Awesome Solid). Vous pouvez voir cela dans le code d'erreur que j'ai posté ci-dessus. Cependant, j'essayais de charger le Regular weight, à partir du répertoire /font-awesome-pro-regular/.

J'ai changé les composants FontAwesomeIcon pour utiliser le préfixe correct, comme ceci:

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

Et maintenant, cela fonctionne comme prévu.

2
dannymcgee

Changez votre App.js pour inclure chaque icône individuellement, je pense que vous pourriez déconstruire l'objet Icon.

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faSpinnerThird from '@fortawesome/fontawesome-pro-regular/faSpinnerThird';
import faCircle from '@fortawesome/fontawesome-pro-regular/faCircle';

fontawesome.library.add(faSpinnerThird, faCircle);

Ceci est conforme à la suggestion de l'API ici: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

0
Phillip Thomas