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: 
Here's how to integrate Font Awesome 5 Pro with React (2018):

1. Purchase a Pro licence from [Font Awesome's pricing page](https://fontawesome.com/pricing)
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](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers#installing-pro).
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](https://github.com/FortAwesome/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](https://github.com/FortAwesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently):

```
// 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

```
**tldr;** Use `@fortawesome/pro-light-svg-icons`, `@fortawesome/pro-regular-svg-icons` NPM packages.

I ran into this problem today, and I think the main question of how to use Pro version of the icons has not been addressed. The official docs aren't much help. This is what I had to do for using `faFilePlus` icon, the light version:

`import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFilePlus } from '@fortawesome/pro-light-svg-icons/faFilePlus';`

and then:

`<FontAwesomeIcon icon={faFilePlus} />`

Note the use of `@fortawesome/pro-light-svg-icons` NPM package. This is undocumented anywhere in the FA's official docs and I had to dig through several places to arrive at this solution. The official docs only talk about the use of "free" icons but don't say where to find the equivalent NPM package for light, regular etc. 

Also note that this does require NPM to be authenticated as mentioned in one of the answers.