Convert Font Awesome pro icons to be hosted locally in React project

Question

I just found out that we can not use the hosted repo for Font Awesome if we don't pay the yearly subscription for the pro icons. So I need to host locally. I am following the instructions here: https://fontawesome.com/docs/web/setup/host-yourself/svg-js. And I have the fontawesome-pro-6.0.0-web folder downloaded and added to an assets folder in my project.

Now what I am confused about are the next steps, specifically in relation to React. I currently have code like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faLongArrowDown } from '@fortawesome/pro-solid-svg-icons';
import { faPrintSlash } from '@fortawesome/pro-duotone-svg-icons';
...
<FontAwesomeIcon
    icon={faLongArrowDown}
    className={'download-arrow semi'}
/>

I can't figure out how to convert that to using the local assets. Can I still use the FontAwesomeIcon component?

Answer 1

After a lot of tinkering, I finally figured this one out. I was able to keep my <FontAwesomeIcon ... code intact and untouched and still use the pro icons hosted locally. All I did was add these two lines to the top of my index.js file:

import './assets/fontawesome-pro-6.0.0-web/js/all.min';
import './assets/fontawesome-pro-6.0.0-web/scss/fontawesome.scss';