Adding Font Awesome Pro to React App - getting started

Question

I'm trying to add Fontawesome pro to my react app.

I've tried almost all of the options on the getting started tab for Font Awesome - and all that is producing is the free brands. So - now I have a mash up of attempts and and currently stuck on following the instructions set out by clodal in this post

I have a package.json with the following dependencies:

"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/pro-light-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@fortawesome/pro-regular-svg-icons": "^5.5.0",
"@fortawesome/pro-solid-svg-icons": "^5.5.0",
"@fortawesome/react-fontawesome": "^0.1.3",

I have seen this post and note others are struggling to figure out how to get started with font awesome.

I have added global config auth token to my app.

I have read the upgrading instructions here.

Currently - i'm getting an error that says:

 Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'

In that page, I have:

 import React from 'react'
    import PropTypes from 'prop-types'
    import classes from './HowPage.scss'

    import GridContainer from "components/Grid/GridContainer.jsx";
    import GridItem from "components/Grid/GridItem.jsx";
    import Clearfix from "components/Clearfix/Clearfix.jsx";
     import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { faTwitter } from '@fortawesome/pro-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

    export const HowPage = ({ how }) => (
      <div className={classes.container}>
        <h1 style={headstyle}>How it Works</h1>
          <GridContainer justify="center">
             <GridItem
                xs={12}
                sm={8}
                md={8}
                className={`${classes.mlAuto} ${classes.mrAuto} ${
                  classes.textCenter
                }`}
            >
            <span>
      <i className="fas fa-layer-plus"></i>
    </span>
            <i className="fal fa-stroopwafel"></i>  
            <FontAwesomeIcon icon="coffee" />
            <i className="fab fa-twitter" />

            </GridItem>
          </GridContainer>

        <pre>{JSON.stringify(how, null, 2)}</pre>
      </div>
    )

    HowPage.propTypes = {
      how: PropTypes.object // from enhancer (firestoreConnect + connect)
    }

    export default HowPage

In my index.html I have:

  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

I have tried adding these import statements to the page on which Im trying to use the fonts (I can't understand the library building instructions).

That produces the errors (expected, given the next issue):

I don't know where to add the following library add call:

library.add(fas, faTwitter)

My app gets initialised via main.js. That page has:

import React from 'react'
import ReactDOM from 'react-dom'
import createStore from './store/createStore'
import { initScripts } from 'utils'
import { version } from '../package.json'
import { env } from './config'
import './styles/core.scss'
// import { library } from '@fortawesome/fontawesome-svg-core'
// import { fal } from '@fortawesome/pro-light-svg-icons'


// Window Variables
// ------------------------------------
window.version = version
window.env = env
initScripts()

// Store Initialization
// ------------------------------------
const initialState = window.___INITIAL_STATE__ || {
  firebase: { authError: null }
}
const store = createStore(initialState)

// Render Setup
// ------------------------------------
const MOUNT_NODE = document.getElementById('root')

let render = () => {
  const App = require('./containers/App').default
  const routes = require('./routes/index').default(store)

  ReactDOM.render(<App store={store} routes={routes} />, MOUNT_NODE)
}

// Development Tools
// ------------------------------------
if (__DEV__) {
  if (module.hot) {
    const renderApp = render
    const renderError = error => {
      const RedBox = require('redbox-react').default

      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
    }

    render = () => {
      try {
        renderApp()
      } catch (e) {
        console.error(e) // eslint-disable-line no-console
        renderError(e)
      }
    }

    // Setup hot module replacement
    module.hot.accept(['./containers/App', './routes/index'], () =>
      setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
        render()
      })
    )
  }
}

// Let's Go!
// ------------------------------------
if (!__TEST__) render()

I think the instructions want me to write that library add call in there - but I can't understand how to do it.

I have seen this post - this user has figured out how to add code to the app.js file. I think I am stuck on this step. My app.js is in main.js - I don't know where to put the library call and I don't know whether this example means that the user will only have access to the 2 icons named in that post (faSpinnerThird, faCircle).

I am using Material-UI - and can see that it contemplates the use of font awesome icons. I just can't figure out how to set it up.

PS: the contributing guidelines on the GitHub support page ask for questions to be tagged with react-fontawesome. There isn't a tag for that reference - I don't have enough points to create one - maybe someone who does can sort that out.

Answer 1

For others struggling with FA in React - PKK's answer on this post helped me How to integrate FontAwesome 5 Pro with React?

However, it doesn't seem to work with 2 word icon names. But - at least it works for many icons. I always thought of FA as plug and play - this has been many hours in figuring out how to get it to work.