title: Adding Font Awesome Pro to React App - getting started
body: <p>I'm trying to add Fontawesome pro to my react app.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/49319363/how-to-integrate-fontawesome-5-pro-with-react">post</a></p>
  
  <p>I have a package.json with the following dependencies:</p>
  
  <pre><code>"@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",
  </code></pre>
  
  <p>I have seen this <a href="https://github.com/FortAwesome/react-fontawesome/issues/101" rel="noreferrer">post</a> and note others are struggling to figure out how to get started with font awesome.</p>
  
  <p>I have added global config auth token to my app.</p>
  
  <p>I have read the upgrading instructions <a href="https://github.com/FortAwesome/react-fontawesome/blob/master/UPGRADING.md" rel="noreferrer">here</a>. </p>
  
  <p>Currently - i'm getting an error that says:</p>
  
  <pre><code> Error: Can't resolve '@fortawesome/pro-brands-svg-icons' in '/Users/18/src/routes/How/components/HowPage'
  </code></pre>
  
  <p>In that page, I have:</p>
  
  <pre><code> 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 }) =&gt; (
        &lt;div className={classes.container}&gt;
          &lt;h1 style={headstyle}&gt;How it Works&lt;/h1&gt;
            &lt;GridContainer justify="center"&gt;
               &lt;GridItem
                  xs={12}
                  sm={8}
                  md={8}
                  className={`${classes.mlAuto} ${classes.mrAuto} ${
                    classes.textCenter
                  }`}
              &gt;
              &lt;span&gt;
        &lt;i className="fas fa-layer-plus"&gt;&lt;/i&gt;
      &lt;/span&gt;
              &lt;i className="fal fa-stroopwafel"&gt;&lt;/i&gt;  
              &lt;FontAwesomeIcon icon="coffee" /&gt;
              &lt;i className="fab fa-twitter" /&gt;
  
              &lt;/GridItem&gt;
            &lt;/GridContainer&gt;
  
          &lt;pre&gt;{JSON.stringify(how, null, 2)}&lt;/pre&gt;
        &lt;/div&gt;
      )
  
      HowPage.propTypes = {
        how: PropTypes.object // from enhancer (firestoreConnect + connect)
      }
  
      export default HowPage
  </code></pre>
  
  <p>In my index.html I have:</p>
  
  <pre><code>  &lt;link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"&gt;
  </code></pre>
  
  <p>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).</p>
  
  <p>That produces the errors (expected, given the next issue):</p>
  
  <p>I don't know where to add the following library add call:</p>
  
  <pre><code>library.add(fas, faTwitter)
  </code></pre>
  
  <p>My app gets initialised via main.js. That page has:</p>
  
  <pre><code>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 = () =&gt; {
    const App = require('./containers/App').default
    const routes = require('./routes/index').default(store)
  
    ReactDOM.render(&lt;App store={store} routes={routes} /&gt;, MOUNT_NODE)
  }
  
  // Development Tools
  // ------------------------------------
  if (__DEV__) {
    if (module.hot) {
      const renderApp = render
      const renderError = error =&gt; {
        const RedBox = require('redbox-react').default
  
        ReactDOM.render(&lt;RedBox error={error} /&gt;, MOUNT_NODE)
      }
  
      render = () =&gt; {
        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'], () =&gt;
        setImmediate(() =&gt; {
          ReactDOM.unmountComponentAtNode(MOUNT_NODE)
          render()
        })
      )
    }
  }
  
  // Let's Go!
  // ------------------------------------
  if (!__TEST__) render()
  </code></pre>
  
  <p>I think the instructions want me to write that library add call in there - but I can't understand how to do it. </p>
  
  <p>I have seen this <a href="https://stackoverflow.com/questions/50107275/font-awesome-5-icons-not-working-with-react-could-not-find-icon-error?rq=1">post</a> - 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). </p>
  
  <p>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.</p>
  
  <p>PS: the <a href="https://github.com/FortAwesome/react-fontawesome/blob/master/CONTRIBUTING.md" rel="noreferrer">contributing guidelines</a> 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.</p>