Brock Duncan Web Development

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
  1. 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 */
  1. 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>
    )
  1. 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.