Type 'IconDefinition' is not assignable to type 'IconProp' with Typescript

[everettglovier]

This bug is identical to #366 - except it's happening with the pro icons. When attempting to use the below code with TypeScript and Next.js:
import {faUser} from '@fortawesome/fontawesome-pro-light'
export default function Navigation({}) {
return <FontAwesomeIcon icon={faUser}>
}

Typescript throws an error: Type 'IconDefinition' is not assignable to type 'IconProp' with Typescript. This does not happen with the free icons.

Version

• "@fortawesome/fontawesome-pro-light": "^5.1.0-3",
• "@fortawesome/fontawesome-svg-core": "^1.2.36",
• "@fortawesome/free-solid-svg-icons": "^5.15.4",
• "@fortawesome/react-fontawesome": "^0.1.16",

A hacky workaround
import {faUser} from '@fortawesome/fontawesome-pro-light'
export default function Navigation({}) {
return <FontAwesomeIcon icon={faUser as IconProp}>
}

[robmadole]

@everettglovier please upgrade @fortawesome/fontawesome-pro-light to @fortawesome/pro-solid-svg-icons@5.15.4. That should resolve the issue for you.

[alachaum]

It seems that @fortawesome/fontawesome-svg-core@1.3.0 is reintroducing this issue. Should v1.3.x only be used with 6.x icons?

The following setup make the <FontAwesomeIcon> component complain about IconDefinition vs IconProp

"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.17",

And this one works fine:

"@fortawesome/fontawesome-svg-core": "~1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.17",

[tckerr-nt]

I was encountering this issue as well. This exact version combo worked for me:

"@fortawesome/fontawesome-svg-core": "1.2.36",
"@fortawesome/react-fontawesome": "0.1.16",

[TomlDev]

I am having the same issue with these versions:

    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.17",

and

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.3.2"

shows

Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'iconName' are incompatible.
      Type 'import("/node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types/index").IconName' is not assignable to type 'import("/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
        Type '"acquisitions-incorporated"' is not assignable to type 'IconName'.ts(2322)
index.d.ts(25, 3): The expected type comes from property 'icon' which is declared here on type 'IntrinsicAttributes & FontAwesomeIconProps'

[edarutyunyan]

Try to update "@fortawesome/free-solid-svg-icons" to version 6.0.0. It works for me.