Cound not find icon react-fontawesome Cound not find icon react-fontawesome reactjs reactjs

Cound not find icon react-fontawesome


You need to add any icons you wish to use, to a "library" for easy reference.

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

Check out working code here:https://codesandbox.io/s/8y251kv448

Also, read this:https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently


Just in case there are other idiots out there like me, make sure that you use the right name in referencing the icons.

I had

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

and

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

when, in fact, the actual icon name is just "user", not "faUser":

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


You can use FontAwesome icons without library like this:

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

I've installed all the necessary packages as react-fontawesome says:

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