Using Font Awesome with Gatsby and React

Using Font Awesome icons with React projects (which Gatsby is built on) is a pretty straight-forward process. Here are the steps I followed to add icons to my project.

1. Install Font Awesome dependencies.

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

2. Create a fontawesome.js file. I'm going to place this file in src/utils.

   import { library } from '@fortawesome/fontawesome-svg-core'
   import { faCoffee } from '@fortawesome/free-solid-svg-icons'
   library.add(faCoffee)
   /_ Now add the faCoffee icon to our library and we can use
   the string name 'coffee' in our app _/

3. Add FontAwesomeIcon to our Button.js component.

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

   const ButtonLink = props => (
    <Link to={props.url}>
      {props.text} <FontAwesomeIcon icon={props.icon} />
    </Link>
   )

4. Use the button component in our app and pass it an icon to use.

   // Use icons from our library
   import '../utils/fontawesome'
   import ButtonLink from '../components/ButtonLink'

   <ButtonLink to={'/the-moon'} text={'The Moon'} icon={'coffee'} />

That's pretty much it. I'll add more about using Pro icons in a bit.