Bug: Type 'IconDefinition' is not assignable to type 'IconProp'

[martinmiglio]

Bug description

Using the FontAwesomeIcon component in react with typescript is resulting in type errors:

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

results from this implementation:

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

export default function Page() {
	return (<FontAwesomeIcon className="h-5 w-5" icon={faDatabase} />)
}

A longer message appears in some cases:

Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'iconName' are incompatible.
      Type 'import("XXX/node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types/index").IconName' is not assignable to type 'import("XXX/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
        Type '"threads"' is not assignable to type 'IconName'.

This is using these versions:

	"@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "typescript": "5.1.6",
    "react": "18.2.0"

This seems to have been an issue with previous versions, but all the resolutions have been to upgrade the package version, an I am on the latest.

Reproducible test case

Included Above

Screenshots

No response

Font Awesome version

6.4.2

Serving

Kit

Implementation

Other (as specified in the bug description)

Browser and Operating System

Compilation does not complete, no browsers.
Using on Windows 11.

Web bug report checklist

• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Is this a duplicate of 12575?

[martinmiglio]

This does seem to be a duplicate @tagliala

Had to explicitly add fontawesome-common-types@6.4.2 with npm i --save @fortawesome/fontawesome-common-types@6.4.2:

"node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
       "hasInstallScript": true,
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
     },