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';

Answer 2

you can import the svg files into your component and use them as the source of your images like so:

import AddressBook from "./static/addressbook.svg";

export default function App() {
  return (
    <div className="App">
      <img
        src={AddressBook}
        alt="icon"
        style={{ height: "20px", width: "20px" }}
      />
    </div>
  );
}

here is a working example in a code sandbox: https://codesandbox.io/s/romantic-jackson-9ng2jn?file=/src/App.js:23-277

EDIT: if you would prefer your icons to be react components here is an example of how that would look as well:

import * as React from "react"

const SvgComponent = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
    <path d="M384 0H96C60.65 0 32 28.65 32 64v384c0 35.35 28.65 64 64 64h288c35.35 0 64-28.65 64-64V64c0-35.35-28.7-64-64-64zM240 128c35.35 0 64 28.65 64 64s-28.65 64-64 64c-35.34 0-64-28.65-64-64s28.7-64 64-64zm96 256H144c-8.8 0-16-7.2-16-16 0-44.2 35.8-80 80-80h64c44.18 0 80 35.82 80 80 0 8.8-7.2 16-16 16zM496 64h-16v96h16c8.8 0 16-7.2 16-16V80c0-8.84-7.2-16-16-16zm0 128h-16v96h16c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm0 128h-16v96h16c8.836 0 16-7.164 16-16v-64c0-8.8-7.2-16-16-16z" />
  </svg>
)

export default SvgComponent

I have updated the codesandbox above to show how both examples would be used