React-fontawesome: Could not find icon {prefix: "fas", iconName: "thumbs-up"}

[v8tix]

Hi,

I added the following code from your examples in the index.js file of an React 16 app:

  import { library } from '@fortawesome/fontawesome-svg-core';
  import { faThumbsUp } from '@fortawesome/pro-regular-svg-icons';
  library.add(faThumbsUp);

Then , I used the thumbs-up icon in a component:

import PropTypes from 'prop-types';
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const PostActionSection = props => {
    const {showComments} = props;
    return (
        <div className="row mt-5">
            <div className="col-md-12">
                Icon: <FontAwesomeIcon icon="thumbs-up" />
            </div>
        </div>
    );
};

And the following error showed up:

Could not find icon {prefix: "fas", iconName: "thumbs-up"}

To test, I replaced the import pro-regular-svg-icons by pro-solid-svg-icons in the index.js file, and the problem was solved. But, I need the same icon for regular and light styles.

[robmadole]

@marcoalmeidap thanks for illustrating this but can you provide a reproducible examples with all the rest of the project files? It's better for you to set it up that for us to try. codesandbox.io is a good choice or just a plain GitHub repo.

[ryanshores]

I was having the same problem with the free regular icons too. After googling it looks like the prefix fas is the default. If you figure out the correct prefix for the pro icon library you can change icon to be icon={["prefix", "iconName"]}.

The regular and solid icons have different prefixes so that helps you with the other issue you mentioned. Just make sure you import both.

[foolishneo]

if you are importing icons from the regular set, you have to set the prefix to "far"

[NishargShah]

Replace

<FontAwesomeIcon icon="iconName"/>

with

<FontAwesomeIcon icon={iconName}/>