How to integrate FontAwesome 5 Pro with React?

Question

Could someone advice me on how to integrate FontAwesome 5 Pro with React?

I know there are packages @fortawesome/react-fontawesome and for example @fortawesome/fontawesome-free-regular but is there a way how to include pro version of icons?

When I log in to FontAwesome website, I can download the pro-version JS but I guess that's of no use in React.

Answer 1

Here's how to integrate Font Awesome 5 Pro with React (2018):

1. Purchase a Pro licence from Font Awesome's pricing page
2. Upon success, ignore the success pages. You should be logged into Font Awesome. In the login state, go to this guide: Font Awesome Installation Guide.
3. If you are logged in and have a valid license key in your account, every code snippet in this tutorial will use your access token.
4. Now, you can install your license key globally via (A) npm config set ... or locally per project via (B) .npmrc. I recommend (B) so other team-mates can also install the pro package.

5. For (B), Go to your package.json directory and create a .npmrc file. In that file, paste the code snippet provided in the guide. It should look something like this:

   // .npmrc
   @fortawesome:registry=https://npm.fontawesome.com/
   //npm.fontawesome.com/:_authToken=<MY_AUTH_TOKEN_FROM_FONT_AWESOME>
   

6. Once done, you should now be able to install the pro packages. They are according to the official react adapter react-fontawesome available as the following npm packages:

   • @fortawesome/pro-solid-svg-icons
   • @fortawesome/pro-regular-svg-icons
   • @fortawesome/pro-light-svg-icons
7. So now do npm install @fortawesome/pro-<MY_ICON_WEIGHT>-svg-icons to install the pro package of your choice.

8. Thereafter, continue usage as provided by the react-fontawesome package. Which should look something like this in your react code if you installed the light version and using the 'Library' method by react-fontawesome:

   // app.js
   import { library, config } from '@fortawesome/fontawesome-svg-core'
   import { fal } from '@fortawesome/pro-light-svg-icons'
   
   library.add(fal)
   

9. Finally, usage looks something like this in a component file (available in both JS and TS flavours):

   // Foo.jsx
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   
   const Foo = () => {
     return (
       <FontAwesomeIcon icon={['fal', 'utensils']} />
     )
   }
   
   export default Foo
   

   And if you are into Typescript:

   // Foo.tsx
   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
   import { IconLookup } from '@fortawesome/fontawesome-svg-core'
   
   const Foo = () => {
     const icon: IconLookup = { prefix: 'fal', iconName: 'utensils' }
     return (
       <FontAwesomeIcon icon={icon} />
     )
   }
   
   export default Foo