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'
    /_ 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} />
  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.