add-font-awesome-pro-5-to-create-react-app.md

How to add Font Awesome Pro 5 to a Create React App

Author: favmd Reviewer: favph

The following document describes the steps that we took to add Font Awesome Pro 5 to a Create React App.

We've basically tried to follow the official docs ("Installing the Pro version of Font Awesome" and "React"), but quickly had to realize that they were not that clear, concise and complete, mostly describing the usage of the Free version of Font Awesome.

We ended up finding this helpful GitHub issue comment and finally did the following:

Table of Contents

• .npmrc
• package.json
• src/App.js
• src/components/Example.js

.npmrc

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

package.json

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
  "@fortawesome/free-brands-svg-icons": "^5.15.1",
  "@fortawesome/pro-duotone-svg-icons": "^5.15.1",
  "@fortawesome/pro-light-svg-icons": "^5.15.1",
  "@fortawesome/pro-regular-svg-icons": "^5.15.1",
  "@fortawesome/pro-solid-svg-icons": "^5.15.1",
  "@fortawesome/react-fontawesome": "^0.1.13",
  "...": "..."
}

src/App.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fad } from '@fortawesome/pro-duotone-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fas } from '@fortawesome/pro-solid-svg-icons'

library.add(fab, fad, fal, far, fas)

src/components/Example.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

// Regular folder:
<FontAwesomeIcon icon={['far', 'folder']} />
// Solid square:
<FontAwesomeIcon icon={['fas', 'square']} />

Check out https://fontawesome.com/how-to-use/on-the-web/using-with/react
to learn more about fine-tuning icon usage and more advanced features.