1

I have a React project that uses FontAwesome icons. To keep the code DRY, I wanted to keep my icon imports in a separate file using the Icon Library, per the guide here: https://fontawesome.com/how-to-use/javascript-api/setup/library.

I added a fontawesome.js file with the following code:

import { library } from "@fortawesome/fontawesome-svg-core";

import { faCode, faHighlighter } from "@fortawesome/free-solid-svg-icons";

library.add(faCode, faHighlighter);

and imported fontawesome.js into my index.js. Then I tried rendering faCode to my Icon.js component:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function Icon() {
  return (
    <div>
        <FontAwesomeIcon icon={['fas', 'fa-code']} />
    </div>
  );
}

only to encounter the following error:

Could not find icon {prefix: "fas", iconName: "fa-code"}

I think I'm missing an import here. The documentation wasn't entirely clear on what to do after the Library has been set up. Any thoughts?

mmz
  • 1,011
  • 1
  • 8
  • 21
  • If you replace `` by `` ? – antoineso Feb 04 '21 at 11:34
  • 2
    Here is another way to cache font awesome in react. find it out from this [LINK](https://fontawesome.com/how-to-use/on-the-web/using-with/react) – qafoori Feb 04 '21 at 11:35
  • @antoineso didn't work for me :/ – mmz Feb 04 '21 at 11:43
  • @hrghafoori this worked for me! seems that I was crawling up the wrong documentation. Thanks for pointing me in the right direction! Feel free to post as an answer to mark as accepted. – mmz Feb 04 '21 at 11:44
  • try to put code instead of faCode. – antoineso Feb 04 '21 at 11:44
  • @mmz your welcome, Please click on "top arrow" to the left of my comment. So the next person who sees this thread can get the correct answer faster. – qafoori Feb 04 '21 at 11:47
  • @hrghafoori seems that I need 15+ rep to vote on comments. Not there yet. My apologies, and thanks again – mmz Feb 04 '21 at 11:53

2 Answers2

1

Here is another way to cache font awesome in react. find it out from this LINK

Dmitriy Bucaev
  • 166
  • 9
0

you need to import the solid (with 'fas' tag) icons from fontawesome:

npm i @fortawesome/free-solid-svg-icons or yarn add @fortawesome/free-solid-svg-icons

crgavrila
  • 3
  • 4