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

See original GitHub issue

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?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:41
  • Comments:25 (2 by maintainers)

github_iconTop GitHub Comments

38reactions
Speedy1991commented, Apr 17, 2022

Plain incompetence at Fontawesome dev team… and frankly I do not think anybody at Fontawesome even cares, because this is such a dumb mistake.

@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.

31reactions
himadharcommented, Mar 16, 2022

I know this is closed, but if it helps, I did this and it worked. 😃

<FontAwesomeIcon icon={faFacebookF as IconProp} />

Read more comments on GitHub >

github_iconTop Results From Across the Web

Argument of type 'IconDefinition' is not assignable to ...
On build (npm start) it produces error/warning Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'.
Read more >
(typescript) facing problem trying to pass font-awsome icon as ...
Error: Type 'object' is not assignable to type 'IconProp'. Type 'object' is not assignable to type '[IconPrefix, IconName]'.ts(2322) ...
Read more >
Type 'IconDefinition' is not assignable to type 'IconProp' with ...
I'm using typescript and next.js react project. I was trying to import github icon( faGithub ) in fontawesome.
Read more >
@fortawesome/fontawesome-common-types - npm
Start using @fortawesome/fontawesome-common-types in your project by ... TypeScript icon, indicating that this package has built-in type ...
Read more >
How To Use Font Awesome icons in Angular Applications
So each time importing icons in individual components is not a ... There are four different types of icon styles available in Font...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found