Can't import Font Awesome icon

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/#/