React-fontawesome: Type 'IconDefinition' is not assignable to type 'IconProp' with Typescript

[geoseong]

I'm using typescript and next.js react project.

I was trying to import github icon(faGithub) in fontawesome.

when I run the next.js's dev mode first without import github icon (no error happens in typescript) and trying to import github icon in fontawesome, it works well.

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

...

<FontAwesomeIcon icon={faGithub} className={sizeClass} />

but problem is to execute typescript compiler(tsc). tsc throws error like this

error TS2322: Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'iconName' are incompatible.
      Type 'import("/[path-to-my-project]/node_modules/@fortawesome/free-brands-svg-icons/node_modules/@fortawesome/fontawesome-common-types/index").IconName' is not assignable to type 'import("/[path-to-my-project]/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
        Type '"deezer"' is not assignable to type 'IconName'.

26         <FontAwesomeIcon icon={faGithub} className={sizeClass} />

I'd tried using some ways, tsc passed. but there's not working in actual react project

Could not find icon {prefix: "fab", iconName: "github"} 

Could not find icon {prefix: "fas", iconName: "github"} 

so I tried this way to make it work the tsc and actual react project.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

...

const faPropIcon = faGithub as IconProp;

...

<FontAwesomeIcon icon={faPropIcon} className={sizeClass} />

my package.json

"@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-fontawesome": "^0.1.9",

I think it's kind of weird.

because this problem happens after installing @fortawesome/free-brands-svg-icons and use faGithub in @fortawesome/free-brands-svg-icons.

is it bug? or should I use this way like this continuously?

[toledoal]

I'm having the same issue... It used to work well. Maybe a change in typescript?

[eseceve]

I'm having the same issue but only for regular icons.

import React from 'react';
import { faMapMarkerAlt as regularIcon } from '@fortawesome/pro-regular-svg-icons/faMapMarkerAlt';
import { faMapMarkerAlt as solidIcon } from '@fortawesome/pro-solid-svg-icons/faMapMarkerAlt';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const myRegularIcon = () =>  (<FontAwesomeIcon icon={regularIcon} />); // fails
export const mySolidIcon = () =>  (<FontAwesomeIcon icon={solidIcon} />); // works

After updated to 5.14.0 bug is gone

[chloe-codes1]

Having the same issue as well.

[MaximeKoitsalu]

Also having the same issue 🤔

[robmadole]

Can you all try something for me (these Typescript issues are so frustrating for everyone)?

Upgrade to the latest dependencies on everything (including @fortawesome/fontawesome-common-types) and give this another go. And if anyone can provide a reproducible test case that would be very helpful. Every time I try to reproduce a TS error I fail so I must be missing a critical piece. We don't use TS daily at Font Awesome so we have to rely pretty heavily on the community to solve some of these.

[keishibuki]

A similar error occurred in the following versions,
but updating the package dependencies makes the error go away.

Before

"@fortawesome/fontawesome-common-types@^0.2.27":
  version "0.2.27"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.27.tgz#19706345859fc46adf3684ed01d11b40903b87e9"
  integrity sha512-97GaByGaXDGMkzcJX7VmR/jRJd8h1mfhtA7RsxDBN61GnWE/PPCZhOdwG/8OZYktiRUF0CvFOr+VgRkJrt6TWg==

"@fortawesome/fontawesome-free@^5.12.1":
  version "5.12.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.1.tgz#2a98fea9fbb8a606ddc79a4680034e9d5591c550"
  integrity sha512-ZtjIIFplxncqxvogq148C3hBLQE+W3iJ8E4UvJ09zIJUgzwLcROsWwFDErVSXY2Plzao5J9KUYNHKHMEUYDMKw==

"@fortawesome/fontawesome-svg-core@^1.2.27":
  version "1.2.27"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.27.tgz#e4db8e3be81a40988213507c3e3d0c158a6641a3"
  integrity sha512-sOD3DKynocnHYpuw2sLPnTunDj7rLk91LYhi2axUYwuGe9cPCw7Bsu9EWtVdNJP+IYgTCZIbyARKXuy5K/nv+Q==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.27"

"@fortawesome/free-brands-svg-icons@^5.12.1":
  version "5.12.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.12.1.tgz#67977addd15e21e57aa1ed71cd2ddecdfaa88647"
  integrity sha512-IYUYcgGsQuwiIHjRGfeSTCIQKUSZMb6FsV6mDj78K0D+YzGJkM4cvEBBUMHtnla5D2HCxncMI/9JX5YIk2GHeQ==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.27"

"@fortawesome/react-fontawesome@^0.1.9":
  version "0.1.9"
  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
  integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
  dependencies:
    prop-types "^15.7.2"

After

"@fortawesome/fontawesome-common-types@^0.2.32":
  version "0.2.32"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==

"@fortawesome/fontawesome-free@^5.12.1":
  version "5.15.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz#ccfef6ddbe59f8fe8f694783e1d3eb88902dc5eb"
  integrity sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==

"@fortawesome/fontawesome-svg-core@^1.2.27":
  version "1.2.32"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.32"

"@fortawesome/free-brands-svg-icons@^5.12.1":
  version "5.15.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.1.tgz#1dc0563f4036639e53d24b8e532ea78a53ca2250"
  integrity sha512-pkTZIWn7iuliCCgV+huDfZmZb2UjslalXGDA2PcqOVUYJmYL11y6ooFiMJkJvUZu+xgAc1gZgQe+Px12mZF0CA==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.32"

"@fortawesome/react-fontawesome@^0.1.9":
  version "0.1.11"
  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz#c1a95a2bdb6a18fa97b355a563832e248bf6ef4a"
  integrity sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==
  dependencies:
    prop-types "^15.7.2"

[geoseong]

Let me update

I upgrade latest version, it works well. error is gone without using as.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
- import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faGithub } from '@fortawesome/free-brands-svg-icons';

...

- const faPropIcon = faGithub as IconProp;
...

- <FontAwesomeIcon icon={faPropIcon} className={sizeClass} />
+ <FontAwesomeIcon icon={faGithub} className={sizeClass} />

package.json

"@fortawesome/fontawesome-svg-core": "^1.2.28", -> "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.14.0", -> "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.13.0", -> "^5.15.1",

yarn.lock

Before

"@fortawesome/fontawesome-common-types@^0.2.28":
  version "0.2.28"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
  integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==

"@fortawesome/fontawesome-common-types@^0.2.30":
  version "0.2.30"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz#2f1cc5b46bd76723be41d0013a8450c9ba92b777"
  integrity sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==

"@fortawesome/fontawesome-svg-core@^1.2.28":
  version "1.2.28"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
  integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.28"

"@fortawesome/free-brands-svg-icons@^5.14.0":
  version "5.14.0"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.14.0.tgz#98555518ba41bdff82fbae2f4d1bc36cd3b1c043"
  integrity sha512-WsqPFTvJFI7MYkcy0jeFE2zY+blC4OrnB9MJOcn1NxRXT/sSfEEhrI7CwzIkiYajLiVDBKWeErYOvpsMeodmCQ==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.30"

"@fortawesome/free-solid-svg-icons@^5.13.0":
  version "5.13.0"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
  integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.28"

After

"@fortawesome/fontawesome-common-types@^0.2.32":
  version "0.2.32"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==

"@fortawesome/fontawesome-svg-core@^1.2.32":
  version "1.2.32"
  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.32"

"@fortawesome/free-brands-svg-icons@^5.15.1":
  version "5.15.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.1.tgz#1dc0563f4036639e53d24b8e532ea78a53ca2250"
  integrity sha512-pkTZIWn7iuliCCgV+huDfZmZb2UjslalXGDA2PcqOVUYJmYL11y6ooFiMJkJvUZu+xgAc1gZgQe+Px12mZF0CA==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.32"

"@fortawesome/free-solid-svg-icons@^5.15.1":
  version "5.15.1"
  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
  dependencies:
    "@fortawesome/fontawesome-common-types" "^0.2.32"

Let me close this issue?