Come includere un'icona Font Awesome nel render () di React

Ogni volta che provo a utilizzare un'icona Font Awesome in React render(), non viene visualizzata nella pagina web risultante sebbene funzioni nel normale HTML.

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

Ecco un esempio dal vivo: http://jsfiddle.net/pLWS3/

Dov'è la colpa?

React utilizza l' classNameattributo, come il DOM.

Se usi la build di sviluppo e guardi la console, c'è un avviso. Puoi vederlo su jsfiddle.

Avviso: classe di proprietà DOM sconosciuta. Volevi dire className?

Se non conosci React JS e utilizzi il comando cli create-react-app per creare l'applicazione, esegui il seguente comando NPM per includere l'ultima versione di font-awesome.

npm install --save font-awesome

importa font-awesome nel tuo file index.js. Basta aggiungere sotto la riga al file index.js

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

o

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

Non dimenticare di utilizzare className come attributo

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

Puoi anche usare la react-fontawesomelibreria di icone. Ecco il link: react-fontawesome

Dalla pagina NPM, installa semplicemente tramite npm:

npm install --save react-fontawesome

Richiedi il modulo:

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

Infine, utilizza il <FontAwesome />componente e passa gli attributi per specificare l'icona e lo stile:

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)' }}
      />
    );
  }
});

Non dimenticare di aggiungere il fantastico CSS per i caratteri a 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

installa fontawesome e 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

quindi nel tuo componente

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

in index.js

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

quindi usa le icone come di seguito:

import React, { Component } from "react";

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

export default Like;

La soluzione più semplice è:

Installare:

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

Importare:

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

Uso:

<FontAwesomeIcon icon={ faThumbsUp }/>

Devi prima installare il pacchetto.

npm install --save react-fontawesome

O

npm i --save @fortawesome/react-fontawesome

Non dimenticare di usare al classNameposto di class.

Successivamente è necessario importarli nel file in cui si desidera utilizzarli.

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

o

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Dopo aver lottato con questo per un po ', mi è venuta questa procedura (basata sulla documentazione di Font Awesome qui ):

Come affermato, dovrai installare la libreria di icone fontawesome , react-fontawesome e fontawesome :

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

e quindi importa tutto nella tua app 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)

Ecco la parte difficile:

Per modificare o aggiungere icone, dovrai trovare le icone disponibili nella libreria dei moduli del nodo, ad es

<your_project_path>\node_modules\@fortawesome\free-solid-svg-icons  

Ogni icona ha due file rilevanti: .js e .d.ts, e il nome del file indica la frase di importazione (abbastanza ovvio ...), quindi l'aggiunta di icone arrabbiate , gem e segno di spunta appare così:

import { faStroopwafel, faAngry, faGem, faCheckCircle } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel, faAngry, faGem, faCheckCircle)

Per utilizzare le icone nel codice js di React, usa:

<FontAwesomeIcon icon=icon_name/>

Il nome dell'icona può essere trovato nel file .js dell'icona pertinente:

ad esempio per faCheckCircle guarda dentro faCheckCircle.js per la variabile ' iconName ':

...
var iconName = 'check-circle'; 
... 

e il codice React dovrebbe assomigliare a questo:

<FontAwesomeIcon icon=check-circle/> 

In bocca al lupo!

La risposta di Alexander dall'alto mi ha davvero aiutato!

Stavo cercando di ottenere le icone degli account social nel piè di pagina della mia app che ho creato con ReactJS in modo da poter aggiungere facilmente uno stato di hover a loro mentre li collegavo anche ai miei account social. Questo è quello che ho finito per dover fare:

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

Quindi nella parte superiore del mio componente piè di pagina ho incluso questo:

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

Il mio componente quindi aveva questo aspetto:

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

Ha funzionato come un fascino.

Nel caso in cui tu stia cercando di includere la fantastica libreria dei font senza dover eseguire importazioni di moduli e installazioni di npm, mettilo nella sezione head della tua pagina index.html di React :

public / index.html (nella sezione head)

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

Quindi nel tuo componente (come App.js) usa semplicemente la convenzione di classe impressionante dei caratteri standard. Ricorda solo di usare className invece di class:

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

npm install --save font-awesome

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

poi

<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>

Ho sperimentato questo caso; Ho bisogno del sito di react / redux che dovrebbe funzionare perfettamente in produzione.

ma c'era una "modalità rigorosa"; Non dovresti pranzare con questi comandi.

yarn global add serve
serve -s build

Dovrebbe funzionare solo con un clic sul file build / index.html. Quando ho usato fontawesome con npm font-awesome, funzionava in modalità di sviluppo ma non in "modalità rigorosa".

Ecco la mia soluzione:

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 ***

in public / index.html

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

Dopo tutti i passaggi precedenti, il fontawesome funziona perfettamente !!!

come ha detto "Praveen MP" puoi installare font-awesome come pacchetto. se hai del filo puoi correre:

 yarn add font-awesome

Se non hai il filo, fai come ha detto Praveen e fai:

npm install --save font-awesome

questo aggiungerà il pacchetto alle dipendenze dei tuoi progetti e installerà il pacchetto nella tua cartella node_modules. nel tuo file App.js aggiungi

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

Il checkout reagisce alle icone piuttosto stimolante e ha funzionato bene.

Nel mio caso stavo seguendo la documentazione per il react-fontawesomepacchetto, ma non è chiaro come chiamare l'icona quando si impostano le icone nella libreria

questo è quello che stavo facendo:

File App.js

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

File dei componenti

<FontAwesomeIcon icon={"coffee"} />

Ma stavo ricevendo questo errore

Quindi ho aggiunto l'alias quando ho passato l'icona prop come:

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

E funziona, puoi trovare il valore del prefisso nel file icon.js, nel mio caso era: faCoffee.js