4

I am unable to build my React project because of Font Awesome library for react.

I have used the icons with <FontAwesomeIcon icon={faPowerOff} /> syntax until now, but after trying to implement automatic build and deploy on Github, I get the following error:

Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
     Types of property 'iconName' are incompatible.

The icon does render with this syntax and the error, strangely.

With the <FontAwesomeIcon icon={"power-off"} /> syntax, I don't get the error anymore, but the icon itself does not render at all.

The versions I have used since the beginning of the project:

├── @fortawesome/fontawesome-svg-core@1.3.0
├── @fortawesome/free-solid-svg-icons@5.15.4 
├── @fortawesome/react-fontawesome@0.1.17

Does anybody know how to fix this?

Daniel Nýdrle
  • 153
  • 1
  • 9

2 Answers2

2

Weird behaviour.

On their website they use icons in React like this:

<FontAwesomeIcon icon="fa-solid fa-1" />

but it didn't worked for me.

This also didn't worked with the newer npm package version:

<FontAwesomeIcon icon={"fa-1"} />

Now I am using this, which works fine:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { fa1 } from '@fortawesome/free-solid-svg-icons/fa1';

<FontAwesomeIcon icon={fa1} />

I am using version:

"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/react-fontawesome": "^0.2.0",
Amel
  • 653
  • 9
  • 15
0

I figured it out by downgrading the fontawesome-svg-core and react-fontawesome packages to the following versions:

├── @fortawesome/fontawesome-svg-core@1.2.36
├── @fortawesome/react-fontawesome@0.1.16
Daniel Nýdrle
  • 153
  • 1
  • 9