1
votes

Utilisation de font-awesome dans React JS

Je suis nouveau dans React JS et j'essaye d'ajouter font-awesome dans mon projet. J'ai installé Node.js et npm. J'ai également inclus les packages suivants:

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

Maintenant, que dois-je faire dans index.js pour pouvoir accéder à toutes les polices et icônes de ces packages? J'ai vérifié plusieurs sources et les informations diffèrent d'un site à l'autre. Pourriez-vous s'il vous plaît expliquer comment cela se fait et ce qui doit être écrit après "import" en haut du fichier.

reactjs npm font-awesome

0 commentaires

5 Réponses :

0
votes

Ces informations se trouvent dans la documentation, voici l'extrait pour les importations

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

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

https://github.com/FortAwesome/react-fontawesome#explicit-import

3 commentaires

Laissez-moi vous donner mon opinion honnête. Vous souhaitez l'inclure dans votre code de réaction, pas de problème. Mais je pense vraiment que vous devriez utiliser le CDN pour fontawesome. Cela vous aidera à réduire la taille de votre bundle lorsque vous déploierez votre application.

En plus de cela, vous avez également besoin d'un plugin dans Webpack pour les regrouper. Cela ajoutera à votre douleur.

Merci d'avoir partagé ça! Puisque je suis juste en train de regarder React JS, le concept de packages et de npm est quelque chose de nouveau pour moi. C'est pourquoi j'ai posé cette question juste pour voir comment cela fonctionne, donc à l'avenir, je connais toutes les options d'utilisation disponibles :)

1
votes

Tout d'abord, assurez-vous que votre package.json contient font-awesome. Si c'est le cas n'utilisez pas npm i font-awesome pour l'installer .
Deuxièmement, vous devez importer les polices qui se trouvent dans le dossier css de font-génial. Ajoutez la ligne à votre fichier index.js. import "../node_modules/font-awesome/css/font-awesome.min.css";

0 commentaires

0
votes

Vous pouvez également importer toutes les icônes géniales de polices gratuites avec le préfixe fas et fab de cette manière.

Vous devez installer certains packages.

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

library.add(fas, fab);

const App = () => {
  return (
    <div>
      <FontAwesomeIcon icon="home" />
      <FontAwesomeIcon icon={['fab', 'google']} />
    </div>
  );
};

export default App;

Ajoutez du code votre fichier app.js

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

0 commentaires

0
votes

Arrêtez simplement l'application du nœud, installez babel-loader et lancez enfin npm start . Cela devrait résoudre votre problème.

0 commentaires

0
votes

Excellente source au point.

https://www.digitalocean.com/community/tutorials/how-to-use-font-awesome-5-with-react

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

0 commentaires