Tengo un proyecto en React y necesito integrarle FontAwesome. Encontré la biblioteca oficial y la instalé como se indica en Léame
$ npm i --save @fortawesome/fontawesome $ npm i --save @fortawesome/react-fontawesomeCuando trato de usarlo en mi código de esta manera:
<FontAwesomeIcon icon='plus'/> <FontAwesomeIcon icon={['fa', 'coffee']}/>Recibo 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 de FontAwesome a la cabeza, pero no ayudó. Estoy usando npm v4.6.1 ; node v8.9.1 ; react v16.2 .
Debe agregar cualquier ícono que desee usar a una "biblioteca" para una fácil referencia.
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
En caso de que haya otros idiotas como yo, asegúrese de usar el nombre correcto al hacer referencia a los íconos.
Yo 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 del icono real es simplemente "usuario", no "faUser":
render() { return ( <FontAwesomeIcon icon="user" /> ); }Puede usar íconos de FontAwesome sin una biblioteca como esta:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faCoffee } from '@fortawesome/free-solid-svg-icons' <FontAwesomeIcon icon={faCoffee} />Instalé todos los paquetes necesarios como dice react-fontawesome :
$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome