Can't import Font Awesome icon

Question

import { library } from '@fortawesome/fontawesome-svg-core';
import { faCopy, faQuestionCircle, faQrcode, faGithub } from '@fortawesome/free-solid-svg-icons';

import AddressList from './components/AddressList';

library.add(faCopy, faQuestionCircle, faQrcode, faGithub);

I have this code to import fontawesome icons in App.js in react. I am using the free version.

I get this error:

Failed to compile.

./src/App.js Attempted import error: 'faGithub' is not exported from '@fortawesome/free-solid-svg-icons'.

Now all I can try to understand is that the free version does not have a github icon perhaps? However on their website.

That is filtering for free and github. I see it there now why am I such a noob?

"@fortawesome/fontawesome-svg-core": "^1.2.6",
"@fortawesome/free-solid-svg-icons": "^5.4.1",
"@fortawesome/react-fontawesome": "^0.1.3",

^ my package.json

Another quick question, where does font awesome even live in the file tree? I can't find it anywhere.

Answer 1

Hey so I just ran into the same issue and it drove me nuts for the past hour or so haha. Basically, they've split all the font awesome icons into their own "packages" or something. I think there are four catagories as seen on their website in the side bar when you click on the 'icons' tab. They are Solid, Regular, Light, and Brands.

For the GitHub icon, it is in the brands package so all you need to do in order to fix it is install the brand package with yarn or npm and import it.

$ yarn add @fortawesome/free-brands-svg-icons

Then in the .js component you want to add your icons

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons'

class Main extends Component {

  render(){
    return(
      <div className="main">
        <h2> Hello Main! </h2>
        <FontAwesomeIcon icon={faCoffee} />
        <FontAwesomeIcon icon={faGithub} />
      </div>
    );
  }
};

here I included both the coffee icon and the github icon to show two different icons.

This leads me to believe that the following should work for any of the icons in Font Awesome...

yarn add @fortawesome/free-[ICON PACKAGE]-svg-icons

and then

import { [ICON NAME] } from '@fortawesome/free-[ICON PACKAGE]-svg-icons';

but I'm not entirely sure. Anyway, hope this helped!

Cheers!

---

UPDATE:

For anyone who might stumble upon this similar issue in the future, I would actually suggest using the react-icons npm package. It contains large a package of popular icon sources (including FontAwesome) and also features only importing what you need. You can check it out at https://react-icons.netlify.com/#/

Answer 2

run this command and import:

1. npm i --save @fortawesome/free-brands-svg-icons or yarn add --save @fortawesome/free-brands-svg-icons;
2. import { faGithub } from '@fortawesome/free-brands-svg-icons';
3. import { faCopy, faQuestionCircle, faQrcode } from '@fortawesome/free-solid-svg-icons';

[NB]: socials icons are named brand icons, so all social icons would be import from free-brands-svg-icons and others would import from free-solid-svg-icons