reactjs - fortawesome - Cound no encuentra el icono react-fontawesome

free-solid-svg-icons

Question

Tengo un proyecto en React y necesito integrar FontAwesome. Encontré la library oficial y la instalé como se indica en el archivo Léame.

$ npm i --save @fortawesome/fontawesome
$ npm i --save @fortawesome/react-fontawesome

Cuando intento usarlo en mi código así:

<FontAwesomeIcon icon=''plus''/>
<FontAwesomeIcon icon={[''fa'', ''coffee'']}/>

Estoy recibiendo este error en la consola:

Could not find icon {prefix: "fas", iconName: "plus"}
Could not find icon {prefix: "fa", iconName: "coffee"}

Traté de incluir el enlace css FontAwesome a la cabeza, pero no sirvió de nada. Estoy usando npm v4.6.1 ; node v8.9.1 ; react v16.2 .

Answer 1

Debe agregar cualquier ícono que desee usar, a una "biblioteca" para una referencia fácil.

import React from ''react'';
import { render } from ''react-dom'';
import Hello from ''./Hello'';
import fontawesome from ''@fortawesome/fontawesome''
import FontAwesomeIcon from ''@fortawesome/react-fontawesome'';
import { faCheckSquare, faCoffee } from ''@fortawesome/fontawesome-free-solid''

const styles = {
  fontFamily: ''sans-serif'',
  textAlign: ''center'',
};

fontawesome.library.add(faCheckSquare, faCoffee);

const App = () => (
  <div style={styles}>
    <FontAwesomeIcon icon="check-square" /><br /><br />
    <FontAwesomeIcon icon="coffee" />
  </div>
);

render(<App />, document.getElementById(''root''));

Consulte el código de trabajo aquí: https://codesandbox.io/s/8y251kv448

Además, lea esto: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently

Answer 2

En caso de que haya otros idiotas como yo, asegúrese de usar el nombre correcto para hacer referencia a los íconos.

tuve

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

library.add(faUser);

y

render() {
  return (        
    <FontAwesomeIcon icon="faUser" />
  );
}

cuando, de hecho, el nombre real del icono es solo "usuario", no "faUser":

render() {
  return (        
    <FontAwesomeIcon icon="user" />
  );
}

Answer 3

Puedes usar los iconos de FontAwesome sin la biblioteca de esta manera:

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

<FontAwesomeIcon icon={faCoffee} />

He instalado todos los paquetes necesarios como dice library :

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

Answer 4

Y si no ve su ícono cuando intenta mostrar faTrashAlt (o un ícono de nombre similar), no solo tiene que eliminar el ''fa'' cuando realmente usa su ícono, sino que también debe convertir el nombre del ícono de cameCase a " lisp-case ".

Entonces, después de cargar el icono de bote de basura alternativo de esta manera:

fontawesome.library.add(faTrashAlt);

Entonces se usa de esa manera:

<FontAwesomeIcon icon="trash-alt" />

Solo para que no pierdas 20 preciosos minutos de tu tiempo.