Comment inclure une icône Font Awesome dans render () de React
Chaque fois que j'essaie d'utiliser une icône Font Awesome dans render() de React, elle ne s'affiche pas sur la page Web résultante bien que cela 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'attribut className, comme le DOM.
Si vous utilisez la version de développement et regardez la console, il y a un avertissement. Vous pouvez voir cela sur le jsfiddle.
Avertissement: classe de propriété DOM inconnue. Voulez-vous dire className?
Si vous êtes nouveau sur React JS et 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 nomClasse comme attribut
render: function() {
return <div><i className="fa fa-spinner fa-spin">no spinner but why</i></div>;
}
Vous pouvez également utiliser la bibliothèque d'icônes react-fontawesome. Voici le lien: react-fontawesome
Depuis la page NPM, installez simplement via npm:
npm install --save react-fontawesome
Requiert le module:
var FontAwesome = require('react-fontawesome');
Et enfin, utilisez le composant <FontAwesome /> et transmettez des 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
installez fontawesome et réagissez-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
que 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;
Vous devez d'abord installer le paquet.
npm install --save react-fontawesome
OR
npm i --save @fortawesome/react-fontawesome
N'oubliez pas d'utiliser className au lieu de class.
Plus tard, vous devez les importer dans le fichier où vous voulez les utiliser.
import 'font-awesome/css/font-awesome.min.css'
ou
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
J'ai eu l'expérience de 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 uniquement avec le fichier build/index.html . Lorsque j’utilisais fontawesome avec npm font-awesome, cela 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 ***
en 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 !!!
Après avoir lutté avec cela pendant un moment, je suis venu avec cette procédure (basée sur la documentation de Font Awesome ici ):
Comme indiqué, vous devrez installer les bibliothèques 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 devez rechercher les icônes disponibles dans votre bibliothèque de modules de nœud, à savoir I.e.
<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 ...), ajoutant donc angry, gem et check-mark icônes 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 à l'intérieur de la variable faCheckCircle.js pour la variable 'iconName':
...
var iconName = 'check-circle';
...
et le code React devrait ressembler à ceci:
<FontAwesomeIcon icon=check-circle/>
Bonne chance!
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
Importation:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';
Utilisation:
<FontAwesomeIcon icon={ faThumbsUp }/>
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 l'application que j'avais créée avec ReactJS afin de pouvoir facilement leur ajouter un état de survol tout en leur demandant de lier mes comptes sociaux. C'est ce que j'ai fini par devoir faire:
$ npm i --save @fortawesome/fontawesome-free-brands
Puis, 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>
Travaillé comme un charme.
comme 'Praveen M P' a dit que vous pouvez installer font-awesome en tant que paquet. si vous avez du fil, vous pouvez courir:
yarn add font-awesome
Si vous n'avez pas de fil, faites comme Praveen et faites-le:
npm install --save font-awesome
cela ajoutera le paquet aux dépendances de vos projets et l'installera dans votre dossier node_modules. dans votre fichier App.js, ajoutez
import 'font-awesome/css/font-awesome.min.css'
Dans mon cas, je suivais la documentation du paquetage react-fontawesome, mais ils ne savent pas exactement comment appeler l'icône lors de la définition 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'ai eu cette erreur
Puis j'ai ajouté le pseudonyme en passant l'icône prop comme:
<FontAwesomeIcon icon={["fal", "coffee"]} />
Et cela fonctionne, vous pouvez trouver la valeur de préfixe dans le fichier icon.js, dans mon cas c'était: faCoffee.js
Commander réagir icônes jolie Dope et a bien fonctionné.