FontAwesomeIcon React component does not accept icon property-CodePudding

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/[email protected]
├── @fortawesome/[email protected] 
├── @fortawesome/[email protected]

Does anybody know how to fix this?

CodePudding user response：

Solution

Regarding font-awesome documentation, it should be used like below

<FontAwesomeIcon icon="fa-solid fa-power-off"/>

Source

https://fontawesome.com/search?q=power-off&s=solid,brands

CodePudding user response：

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

├── @fortawesome/[email protected]
├── @fortawesome/[email protected]