react-fontawesome: Type 'IconDefinition' is not assignable to type 'IconProp' with Typescript
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
- <FontAwesomeIcon icon={[‘fab’, ‘github’]} className={sizeClass} />
- <FontAwesomeIcon icon={[‘fas’, ‘github’]} className={sizeClass} />
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?
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 49
- Comments: 42 (2 by maintainers)
Commits related to this issue
- Try to fix the dependency again based on https://github.com/FortAwesome/react-fontawesome/issues/366#issuecomment-1047949561 — committed to Layout-Parser/platform by lolipopshock 2 years ago
- Fix issues with angular-fontawesome The angular app would not compile and would produce the error that 'Type "IconDefinition" is not assignable to type "IconProp"'. To fix this I casted the icon val... — committed to bnewberg/portfolio-website by bnewberg 2 years ago
I know this is closed, but if it helps, I did this and it worked. 😃
<FontAwesomeIcon icon={faFacebookF as IconProp} />@karlkaspar I think you should rethink your words, they are really inappropriate.
This is an open and friendly community, there is no need to flame/blame others.
Why not just open a new issue (maybe even a PR) to fix the docs? You can spread your knowlege instead of going toxic.
just import any icon from solid svg module
That’s it, enjoy 🎉
I have come to understand the underlying issue.
I followed the instructions found on Fontawesome website to install their product.
Plain incompetence at Fontawesome dev team… and frankly I do not think anybody at Fontawesome even cares, because this is such a dumb mistake.
From the image we can see how we are supposed to use an icon in react.
This will give you a type error if you are using Typescript, because god forbid anyone at Fontawesome has ever heard of React and Typescript, the most popular web development combo for the past 5 years.
This is how you can actually use it. <FontAwesomeIcon icon={[‘fa’, ‘arrow-right-from-bracket’]} />
The first parameter ‘fa’ can be of these types export type IconPrefix = “fas” | “far” | “fal” | “fat” | “fad” | “fab” | “fak” ;
THERE IS NO ‘FA’ IN THE ALLOWED TYPES… the icon Fontawesome said on their page, that I can use, I CANNOT because of their multiple blunders…
The last parameter can be found in the same file as IconPrefix export type IconName = [ … . … … . ] tons of lines of code here I am not going to paste.
Had the same issue today. Fixed by upgrading packages:
@Jule- I can confirm this Upgrading all packages to the newest version fixed this for me (especially
@fortawesome/fontawesome-svg-core": "^1.3.0->@fortawesome/fontawesome-svg-core": "^6.1.0)Let me update
I upgrade latest version, it works well. error is gone without using
as.package.json
yarn.lock
Before
After
Let me close this issue?
This has broken again with
fontawesome-svg-core@1.3(while usingfree-solid-svg-icons@5). It might not be worth reopening though, since it works with the newfree-solid-svg-icons@6.No type errors with v5 and v1.2.36:
Throws the type errors with v5 and v1.3.0:
I’m not sure where the
fontawesome-common-types@0.2.36is being required (probably solid-svg-icons v5). I don’t have it explicitly listed in my package.json. I assume having the two different versions offontawesome-common-typesis the source of the problem.No type errors with v6 and v1.3.0:
I’m using Font Awesome on a React Native project and I followed these docs to set it up.
I was getting this issue until I noticed that I missed this install:
npm i --save @fortawesome/fontawesome-svg-coreAdding that package resolved my issue.
Also having the same issue 🤔
Having the same issue as well.
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.This is a dependency issue. Upgrading
@fortawesome/free-solid-svg-iconsfrom^6.2.0to^6.2.1causes its dependency on@fortawesome/fontawesome-common-types6.2.1 to be installed separately atnode_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-typeswhile the existing package@fortawesome/fontawesome-common-typesinstalled atnode_modules/@fortawesome/fontawesome-common-typesstays at version 6.2.0. Since@fortawesome/react-fontawesomeand@fortawesome/free-solid-svg-iconsuse different versions of the same dependency, their types are incompatible.npm updatefixes it, but the error message is not obvious.I’m having the same issue… It used to work well. Maybe a change in typescript?
@geoseong 's use of “free-brands-svg-icons” helped me. I made the change below (while guessing that
"fa-solid fa-caret-down"could be changed to{ faCaretDown}. I also had installed free-solid instead of free-brands, but it still worked for me.I’ve tried almost all the combinations posted here already, no luck. Here’s the latest set of versions that’s breaking for me. Any ideas?
It seems that there is wrong dependency:
If like me you have added these dependencies at the wrong time you should have pulled some in v1 and some in v6. It seems that
6.0.0=>6.1.0changed thatcommon-typeversion whilesvg-core@1.3.0sticked not updated since v6 is major release. Take care to install synced versions to solve this issue!This worked for me too, thanks @SeanBarker182
As mentioned above by @GeorgEchterling, you should update your packages and set them to the same version.
To verify their versions, type:
yarn list | grep fontawesomeornpm list | grep fortawesome. This command will return something like this:Then type:
npm updateoryarn update(or update one by one). After updating, it should work as expected. Output:The versions that worked for me. Bumping
@fortawesome/react-fontawesometo^0.2.0seems to break the types.@zacherkkila that is also what I suggested 5 above you. 😃
Not sure I saw this explicitly listed as an answer… For me the core was not the same version as the others… If this is indeed important, it would be great to have a large note added to the instructions to the website (if it isn’t already). I assume many people start with the free version and then when they add pro the versions don’t line up… No guarantee that another yarn install didn’t just fix it and the versions were irrelevant, just giving another datapoint.
Changing them all at the same version fixed this type error.
“Toxic” or no, this solved my issue. No one likes to waste hours because of confusing and wrong documentation. Not just wrong format for supplying the prop value, but also wrong example value.
With the following version & following the steps here for Next.js I don’t get any type errors.
Type ‘“fa-solid fa-arrow-right-from-bracket”’ is not assignable to type ‘IconProp’.
<FontAwesomeIcon icon="fa-solid fa-arrow-right-from-bracket" />Still the same problem
import { faStar } from “@fortawesome/free-solid-svg-icons”; . . . return
(<FontAwesomeIconicon={faStar} fontSize=“50” />) . . .This worked for me. Seems like the icon is not a string and it is of type Iconprop so you need to assign a proper object to it that can be imported from “@fortawesome/free-solid-svg-icons”; and easily use object destructive to get a specific Icon
I’m having the same issue but only for regular icons.
After updated to
5.14.0bug is goneUpdating all dependencies, also the pro to the same version also helps prevent these errors.
By the way, upgrading also
@fortawesome/free-brands-svg-iconssees to workI upgraded
free-solid-svg-iconstoday and I had this issue, I had to downgrade to the previous release in order to fix it, I think this issue should be re-opened again.