Como incluir um ícone de fonte impressionante na renderização do React ()

Sempre que tento usar um ícone Font Awesome no React's render(), ele não é exibido na página da web resultante, embora funcione em HTML normal.

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

Aqui está um exemplo ao vivo: http://jsfiddle.net/pLWS3/

Onde está a culpa?

O React usa o classNameatributo, como o DOM.

Se você usar o build de desenvolvimento e olhar para o console, há um aviso. Você pode ver isso no jsfiddle.

Aviso: classe de propriedade DOM desconhecida. Você quis dizer className?

Se você for novo no React JS e estiver usando o comando create-react-app cli para criar o aplicativo, execute o seguinte comando NPM para incluir a versão mais recente do font-awesome.

npm install --save font-awesome

import font-awesome para seu arquivo index.js. Basta adicionar a linha abaixo ao seu arquivo index.js

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

ou

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

Não se esqueça de usar className como atributo

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

Você também pode usar a react-fontawesomebiblioteca de ícones. Aqui está o link: react-fontawesome

Na página NPM, basta instalar via npm:

npm install --save react-fontawesome

Requer o módulo:

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

E, finalmente, use o <FontAwesome />componente e passe atributos para especificar o ícone e o estilo:

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ão se esqueça de adicionar o CSS incrível da fonte em 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

instalar 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

então em seu 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

em index.js

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

em seguida, use os ícones abaixo:

import React, { Component } from "react";

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

export default Like;

A solução mais simples é:

Instalar:

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

Importar:

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

Usar:

<FontAwesomeIcon icon={ faThumbsUp }/>

Você precisa instalar o pacote primeiro.

npm install --save react-fontawesome

OU

npm i --save @fortawesome/react-fontawesome

Não se esqueça de usar em classNamevez de class.

Mais tarde, você precisa importá-los no arquivo onde deseja usá-los.

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

ou

import FontAwesomeIcon from '@fortawesome/react-fontawesome'

Depois de lutar com isso por um tempo, eu vim com este procedimento (com base na documentação do Font Awesome aqui ):

Conforme declarado, você terá que instalar a biblioteca de ícones 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 importe tudo para seu aplicativo 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)

Aqui vem a parte complicada:

Para alterar ou adicionar ícones, você terá que encontrar os ícones disponíveis em sua biblioteca de módulos de nó, ou seja,

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

Cada ícone tem dois arquivos relevantes: .js e .d.ts, e o nome do arquivo indica a frase de importação (bastante óbvio ...), então adicionar os ícones angry , gem e check-mark tem a seguinte aparência:

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

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

Para usar os ícones em seu código React js, use:

<FontAwesomeIcon icon=icon_name/>

O nome do ícone pode ser encontrado no arquivo .js do ícone relevante:

por exemplo, para faCheckCircle, olhe dentro de faCheckCircle.js para a variável ' iconName ':

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

e o código React deve ser semelhante a este:

<FontAwesomeIcon icon=check-circle/> 

Boa sorte!

A resposta de Alexander de cima realmente me ajudou!

Eu estava tentando obter ícones de contas sociais no rodapé do meu aplicativo que criei com ReactJS para que eu pudesse adicionar facilmente um estado de foco a eles ao mesmo tempo em que vinculavam minhas contas sociais. Isso é o que acabei tendo que fazer:

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

Então, no topo do meu componente de rodapé, incluí isto:

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

Meu componente era assim:

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

Funcionou como um encanto.

Caso você queira incluir a incrível biblioteca de fontes sem ter que fazer importações de módulos e instalações de npm, coloque isso na seção head de sua página React index.html :

public / index.html (na seção head)

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

Em seguida, em seu componente (como App.js), use apenas uma convenção de classe de fonte padrão incrível. Lembre-se de usar className em vez 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';

então

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

Eu fui vivenciado neste caso; Eu preciso do site react / redux que deve estar funcionando perfeitamente na produção.

mas havia um 'modo estrito'; Não devo almoçar com esses comandos.

yarn global add serve
serve -s build

Deve trabalhar com apenas clique no arquivo build / index.html. Quando usei o fontawesome com npm font-awesome, ele estava funcionando no modo de desenvolvimento, mas não no 'modo estrito'.

Aqui está minha solução:

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

em public / index.html

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

Depois de todas as etapas acima, o fontawesome funciona BEM !!!

como 'Praveen MP' disse, você pode instalar o font-awesome como um pacote. se você tem fio, pode executar:

 yarn add font-awesome

Se você não tem fio, faça o que Praveen disse e faça:

npm install --save font-awesome

isso adicionará o pacote às dependências do seu projeto e instalará o pacote na pasta node_modules. no seu arquivo App.js, adicione

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

Check check ícones reagem muito legal e funcionou bem.

No meu caso, eu estava seguindo a documentação do react-fontawesomepacote, mas eles não estão claros sobre como chamar o ícone ao definir os ícones na biblioteca

era isso que eu estava fazendo:

Arquivo App.js

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

Arquivo de componente

<FontAwesomeIcon icon={"coffee"} />

Mas eu estava recebendo este erro

Em seguida, adicionei o alias ao passar a propriedade do ícone como:

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

E está funcionando, você pode encontrar o valor do prefixo no arquivo icon.js, no meu caso era: faCoffee.js