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

```
I think you will be able to use them be adding the JS script and appropriate CSS files to your **index.html**

Let's say if you want to use the default font awesome without having any packages installed then directly include file in **index.html** as shown below

```js
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
```