reactjsfont-awesome

Cound not find icon react-fontawesome


I have a project on React and I need to integrate FontAwesome to it. I found official library and installed it as instructed in readme

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

When I try to use it in my code like this:

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

I am getting this error on the console:

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

I tried to include FontAwesome css link to head but it didn't help. I am using npm v4.6.1; node v8.9.1; react v16.2.


Solution

  • 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