Type 'IconDefinition' is not assignable to type 'IconProp' in FontAwesome with React

Question

I'm working on a React application using FontAwesome icons. When attempting to render icons using the FontAwesomeIcon component from @fortawesome/react-fontawesome, I encountered the following error:

Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'prefix' are incompatible.
      Type 'import(...).IconPrefix' is not assignable to type 'import(...).IconPrefix'.
        Type '"fast"' is not assignable to type 'IconPrefix'. Did you mean '"fas"'?

Here's a snippet of my code:

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faInstagram,
  faFacebook,
  faLinkedin,
  faDiscord,
  faLinkedinIn,
} from "@fortawesome/free-brands-svg-icons";
import styled from "styled-components";
import contactcss from "./Contact.module.css";
import Card from "../../components/ui/Card";
import { blueHex } from "../../colors";
import grid from "../../resources/blueGrid.png";

// Styled component for the main page container
const Page = styled.div`
  color: ${blueHex};
  padding: 20px;
  min-height: calc(100vh - 84px);
  text-align: left;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: url(${grid});
  background-repeat: repeat;
  background-size: cover;

  @media only screen and (max-width: 768px) {
    height: calc(100vh - 80px);
  }

  @media only screen and (max-width: 425px) {
    padding: 5px;
  }
`;

function Contact() {
  return (
    <div>
      <div>
        <Page>
          <div>
            <div className={contactcss.contact}>Contact Us</div>
          </div>
        </Page>
      </div>

      <div className={contactcss.card}>
        <Card
          title="We're keen to hear from you!"
          imageUrl="https://images.app.goo.gl/D6m6hHMnP1gjsKKV7"
          body=""
        />
      </div>

      <div className={contactcss.greenbackground}>
        <div className={contactcss.socials}>
          <h1 className={contactcss.oursocials}>Our Socials</h1>
          <p className={contactcss.socialmedia}>
            Stay connected with us through our social channels
          </p>

          <div className={contactcss.socialcircles}>
            <div className={contactcss.circle}></div>
            <div className={contactcss.instagramcircle}></div>
            <div className={contactcss.discordcircle}></div>
            <div className={contactcss.linkedincircle}></div>
          </div>

          <div className={contactcss.sociallogos}>
            <a href="https://www.instagram.com/gdscusyd/">
              <FontAwesomeIcon
                className={contactcss.instagram}
                icon={faInstagram}
              />
            </a>

            <a href="https://www.facebook.com/gdsc.usyd">
              <FontAwesomeIcon
                className={contactcss.facebook}
                icon={faFacebook}
              />
            </a>

            <a href="https://discord.com/channels/872033047652990986/872033047652990989">
              <FontAwesomeIcon
                className={contactcss.discord}
                icon={faDiscord}
              />
            </a>

            <a href="https://www.linkedin.com/company/gdsc-usyd/">
              <FontAwesomeIcon
                className={contactcss.linkedin}
                icon={faLinkedinIn}
              />
            </a>
          </div>
        </div>
      </div>

      <div className={contactcss.bluetext}>
        <h1 className={contactcss.joinclub}>Join the club today !</h1>
        <p className={contactcss.foraccess}>
          For access to our amazing events and competitions
        </p>
        <a
          href="https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?client_id=857409878587-im3f0si9p11h41a6aeiil7cs37frkubb.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fgdsc.community.dev%2Faccounts%2Fgoogle%2Flogin%2Fcallback%2F&scope=profile%20email&response_type=code&state=hLlU8pFhaSiq&access_type=offline&service=lso&o2v=1&theme=glif&flowName=GeneralOAuthFlow"
          target="_blank" // Opens the link in a new tab/window
          className={contactcss.joinusbutton}
        >
          Join Us
        </a>
      </div>

      <div className={contactcss.diagonalbluebackground}></div>
      <div className={contactcss.blankbackground}></div>
    </div>
  );
}

export default Contact;

Could someone help me understand why this error is occurring and how to resolve it? I've checked my imports and usage of FontAwesome icons, but I'm still facing this issue..I've even utilised the correct packages such as '@fortawesome/react-fontawesome'.

Additional Information:

Using React v17.0.2 FontAwesome packages: @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons

Daven

Answer 1

My setup is as below (where I was getting the error with regular svg icons, but not with solid svg icons)

"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-regular-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",

My solution was this (adding as IconProp):

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser } from "@fortawesome/free-regular-svg-icons";
import { IconProp } from "@fortawesome/fontawesome-svg-core";

<FontAwesomeIcon icon={faUser as IconProp} />

And React stopped complaining and I was able to continue.

Indoor

Answer 2

I had the same error in my project and I figured out that I had some different versions for @fortawesome packages - @fortawesome/fontawesome-svg-core was not the same version as the others.

To verify the current versions, use: yarn list | grep fortawesome or npm list | grep fortawesome.

I had the following versions:

├─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  ├─ @fortawesome/fontawesome-common-types@^0.3.0
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]

You should update your packages and set them to the same (latest) version:

yarn upgrade @fortawesome/fontawesome-svg-core@latest
yarn upgrade @fortawesome/free-brands-svg-icons@latest
yarn upgrade @fortawesome/free-regular-svg-icons@latest
yarn upgrade @fortawesome/free-solid-svg-icons

After update, the error is gone.

Versions after update:

├─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]
│  └─ @fortawesome/[email protected]
├─ @fortawesome/[email protected]

Code:

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

<FontAwesomeIcon icon={faUser} className="w-10 h-10" />

Amphitryon

Answer 3

According to this article, you should change a bit your code, https://fontawesome.com/v5/docs/web/use-with/react#typescript

Try this code,

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

const faInstagramIcon = findIconDefinition({ prefix: 'fab', iconName: 'faInstagram' });

And then, in your component,

<FontAwesomeIcon
                className={contactcss.instagram}
                icon={faInstagramIcon}
/>

Offal

This will add every icon in the package to the build and won't remove them via tree-shaking which can make the build quite big. – Atharvaveda

Answer 4

import { someIcon } from '@fortawesome/free-solid-svg-icons';
import { IconProp } from '@fortawesome/fontawesome-svg-core';


iconInComponent = someIcon as IconProp;


<fa-icon [icon]="iconInComponent"></fa-icon>

Jersey