Comment inclure une icône Font Awesome dans le render () de React

Chaque fois que j'essaie d'utiliser une icône Font Awesome dans React render(), elle n'est pas affichée sur la page Web résultante bien qu'elle fonctionne en HTML normal.

render: function() {
    return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Voici un exemple en direct: http://jsfiddle.net/pLWS3/

Où est la faute?

React utilise l' classNameattribut, comme le DOM.

Si vous utilisez la version de développement et regardez la console, il y a un avertissement. Vous pouvez le voir sur le fichier jsfiddle.

Avertissement: classe de propriété DOM inconnue. Vouliez-vous dire className?

Si vous êtes nouveau dans React JS et que vous utilisez la commande create-react-app cli pour créer l'application, exécutez la commande NPM suivante pour inclure la dernière version de font-awesome.

npm install --save font-awesome

importez font-awesome dans votre fichier index.js. Ajoutez simplement la ligne ci-dessous à votre fichier index.js

import '../node_modules/font-awesome/css/font-awesome.min.css'; 

ou

import 'font-awesome/css/font-awesome.min.css';

N'oubliez pas d'utiliser className comme attribut

 render: function() {
    return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}

Vous pouvez également utiliser la react-fontawesomebibliothèque d'icônes. Voici le lien: react-fontawesome

Depuis la page NPM, installez simplement via npm:

npm install --save react-fontawesome

Nécessite le module:

var FontAwesome = require('react-fontawesome');

Et enfin, utilisez le <FontAwesome />composant et transmettez les attributs pour spécifier l'icône et le style:

var MyComponent = React.createClass({
  render: function () {
    return (
      <FontAwesome
        className='super-crazy-colors'
        name='rocket'
        size='2x'
        spin
        style={{ textShadow: '0 1px 0 rgba(0, 0, 0, 0.1)' }}
      />
    );
  }
});

N'oubliez pas d'ajouter le CSS font-awesome à index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

https://github.com/FortAwesome/react-fontawesome

installer fontawesome et react-fontawesome

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

puis dans votre composant

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCheckSquare, faCoffee } from '@fortawesome/fontawesome-free-solid'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>
          <FontAwesomeIcon icon={faCoffee} />
        </h1>
      </div>
    );
  }
}

export default App;

npm install --save-dev @fortawesome/fontawesome-free

dans index.js

import '@fortawesome/fontawesome-free/css/all.min.css';

puis utilisez des icônes comme ci-dessous:

import React, { Component } from "react";

class Like extends Component {
  state = {};
  render() {
    return <i className="fas fa-heart"></i>;
  }
}

export default Like;

La solution la plus simple est:

Installer:

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

Importer:

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

Utilisation:

<FontAwesomeIcon icon={ faThumbsUp }/>

Vous devez d'abord installer le package.

npm install --save react-fontawesome

OU

npm i --save @fortawesome/react-fontawesome

N'oubliez pas d'utiliser à la classNameplace de class.

Plus tard, vous devrez les importer dans le fichier où vous souhaitez les utiliser.

import 'font-awesome/css/font-awesome.min.css'

ou

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

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!

La réponse d'Alexandre d'en haut m'a vraiment aidé!

J'essayais d'obtenir des icônes de comptes sociaux dans le pied de page de mon application que j'ai créée avec ReactJS afin de pouvoir facilement leur ajouter un état de survol tout en leur permettant de lier mes comptes sociaux. C'est ce que j'ai fini par devoir faire:

$ npm i --save @fortawesome/fontawesome-free-brands

Ensuite, en haut de mon composant de pied de page, j'ai inclus ceci:

import React from 'react';
import './styles/Footer.css';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faTwitter, faLinkedin, faGithub} from '@fortawesome/fontawesome-free-brands';

Mon composant ressemblait alors à ceci:

<a href='https://github.com/yourusernamehere'>
  <FontAwesomeIcon className ='font-awesome' icon={faGithub} />
</a>

A fonctionné comme un charme.

Si vous souhaitez inclure la bibliothèque de polices géniale sans avoir à effectuer d'importations de modules et d'installations npm, placez-la dans la section head de votre page React index.html :

public / index.html (dans la section head)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Ensuite, dans votre composant (tel que App.js), utilisez simplement la convention de classe impressionnante de police standard. N'oubliez pas d'utiliser className au lieu de class:

<button className='btn'><i className='fa fa-home'></i></button>

npm install --save font-awesome

import 'font-awesome/css/font-awesome.min.css';

puis

<i className="fa fa-shopping-cart" style={{fontSize:24}}></i>  
        <span className="badge badge-danger" style={{position:"absolute", right:5, top:5}}>number of items in cart</span>

comme 'Praveen MP' l'a dit, vous pouvez installer font-awesome en tant que package. si vous avez du fil, vous pouvez exécuter:

 yarn add font-awesome

Si vous n'avez pas de fil, faites comme Praveen a dit et faites:

npm install --save font-awesome

cela ajoutera le package aux dépendances de vos projets et installera le package dans votre dossier node_modules. dans votre fichier App.js, ajoutez

import 'font-awesome/css/font-awesome.min.css'

J'ai vécu ce cas; J'ai besoin du site react / redux qui devrait fonctionner parfaitement en production.

mais il y avait un «mode strict»; Ne devrait pas le déjeuner avec ces commandes.

yarn global add serve
serve -s build

Devrait travailler avec seulement cliquez sur le fichier build / index.html. Quand j'ai utilisé fontawesome avec npm font-awesome, il fonctionnait en mode développement mais ne fonctionnait pas en «mode strict».

Voici ma solution:

public/css/font-awesome.min.css
public/fonts/font-awesome.eot 
*** other different types of files(4) ***
*** I copied these files for node_module/font-awesome ***
*** after copied then can delete the font-awesome from package.json ***

dans public / index.html

<link rel="stylesheet" href="%PUBLIC_URL%/css/font-awesome.min.css">

Après toutes les étapes ci-dessus, la fontawesome fonctionne bien !!!

Checkout réagit aux icônes assez dope et a bien fonctionné.

Dans mon cas, je suivais la documentation du react-fontawesomepackage, mais ils ne savent pas comment appeler l'icône lors de la configuration des icônes dans la bibliothèque

c'est ce que je faisais:

Fichier App.js

import {faCoffee} from "@fortawesome/pro-light-svg-icons";
library.add(faSearch, faFileSearch, faCoffee);

Fichier de composant

<FontAwesomeIcon icon={"coffee"} />

Mais j'obtenais cette erreur

Ensuite, j'ai ajouté l'alias lors du passage de l'accessoire d'icône comme:

<FontAwesomeIcon icon={["fal", "coffee"]} />

Et cela fonctionne, vous pouvez trouver la valeur du préfixe dans le fichier icon.js, dans mon cas était: faCoffee.js