Font Awesome 5 icons not working with React (“Could not find icon” error)

Question

I'm trying to use Font Awesome 5 Pro (I have a license) in my React project, and I've followed the instructions in the API to the best of my ability, but I'm still having issues.

In my project, I used npm to install fontawesome, fontawesome-common-types, fontawesome-pro-light, fontawesome-pro-regular, fontawesome-pro-solid, and react-fontawesome. All those folders are in my node_modules/@fortawesome/ directory

In my App.js, I have these imports (this isn't the whole file, just the relevant snippets):

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

fontawesome.library.add(faSpinnerThird, faCircle);

Then I have another component, Spinner.js, with this code:

import React from 'react';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';

const spinner = () => (
    <div className="fa-layers fa-fw">
        <FontAwesomeIcon icon="circle" color="#ddd" />
        <FontAwesomeIcon icon="spinner-third" color="#aaa" spin />
    </div>
);

export default spinner;

In another component, I'm importing the Spinner component and rendering it conditionally, but when it gets rendered, I get these errors in my browser console:

Could not find icon
Object { prefix: "fas", iconName: "circle" }

Could not find icon
Object { prefix: "fas", iconName: "spinner-third" }

I'm pretty new to React, but I think I've followed the instructions in FontAwesome's React API correctly. Any idea where I might be going wrong?

Answer 1

I think the problem is becuase by default the prefix is fas (Font Awesome Solid) so in the case of:

<FontAwesomeIcon icon="circle" color="#ddd" />

it is looking for the circle icon in the fas, however, you want to use the faCircle from fontawesome-pro-regular

import {faSpinnerThird, faCircle} from '@fortawesome/fontawesome-pro-regular/';

So I think you want to write something like

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

Also if you dont know what the prefix of is of the library you can do

fontawesome.icon(faPlus).abstract

which will give you an object like:

[{
"tag": "svg",
"attributes": {
  "data-prefix": "fa",
  "data-icon": "user",
  "class": "svg-inline--fa fa-user fa-w-16",
  "role": "img",
  "xmlns": "http://www.w3.org/2000/svg",
  "viewBox": "0 0 512 512"
},
"children": [
  {
    "tag": "path",
    "attributes": {
      "fill": "currentColor",
      "d": "M96…112z"
    }
  }
]
}]

https://fontawesome.com/how-to-use/font-awesome-api

Answer 2

I figured it out!

By default the FontAwesomeIcon component uses the "fas" prefix (for Font Awesome Solid). You can see that in the error code I posted above. However, I was trying to load the Regular weight, from the /font-awesome-pro-regular/ directory.

I changed the FontAwesomeIcon components to use the correct prefix, like this:

<FontAwesomeIcon icon={["far", "circle"]} color="#ddd" />

And now it works as expected.

Answer 3

Change your App.js to include each icon individually, I believe you might be deconstructing the Icon object.

import fontawesome from '@fortawesome/fontawesome';
import FontAwesomeIcon from '@fortawesome/react-fontawesome';
import faSpinnerThird from '@fortawesome/fontawesome-pro-regular/faSpinnerThird';
import faCircle from '@fortawesome/fontawesome-pro-regular/faCircle';

fontawesome.library.add(faSpinnerThird, faCircle);

This is per the API suggestion here: https://www.npmjs.com/package/@fortawesome/react-fontawesome#build-a-library-to-reference-icons-throughout-your-app-more-conveniently