web-dev-qa-db-fra.com

Impossible de trouver l'icône react-fontawesome

J'ai un projet sur React et je dois y intégrer FontAwesome. J'ai trouvé official bibliothèque et je l'ai installé comme indiqué dans le fichier readme.

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

Quand j'essaye de l'utiliser dans mon code comme ceci:

<FontAwesomeIcon icon='plus'/>
<FontAwesomeIcon icon={['fa', 'coffee']}/>

Je reçois cette erreur sur la console:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

J'ai essayé d'inclure le lien de css de FontAwesome à la tête mais cela n'a pas aidé. J'utilise npm v4.6.1; node v8.9.1; react v16.2.

reactjsfont-awesome
24
iamawebgeek

Vous devez ajouter les icônes que vous souhaitez utiliser à une "bibliothèque" pour pouvoir vous y référer facilement.

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById('root'));

Découvrez le code de travail ici: https://codesandbox.io/s/8y251kv448

Lisez également ceci: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app -plus-commodément

32
Shishir

Juste au cas où il y aurait d'autres idiots comme moi, assurez-vous d'utiliser le bon nom en faisant référence aux icônes.

J'ai eu

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faUser } from "@fortawesome/free-solid-svg-icons";

library.add(faUser);

et

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

quand, en fait, le nom de l'icône est juste "utilisateur", pas "faUser":

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}
20
J.D. Mallen

Et si vous ne voyez pas votre icône lorsque vous essayez d'afficher faTrashAlt (ou une icône portant le même nom), vous devez non seulement supprimer le "fa" lorsque vous utilisez réellement votre icône, mais vous devez également convertir le nom de l'icône de cameCase à "LISP-case".

Ainsi, après avoir chargé l’icône de la corbeille alternative, vous pouvez:

fontawesome.library.add(faTrashAlt);

Il est ensuite utilisé de cette façon:

<FontAwesomeIcon icon="trash-alt" />

Pour que vous ne perdiez pas 20 précieuses minutes de votre temps.

4
Thomas

Vous pouvez utiliser les icônes FontAwesome sans bibliothèque comme ceci:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon icon={faCoffee} />

J'ai installé tous les paquets nécessaires car react-fontawesome dit:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome
1
Vladimir Vlasov