I'm working on a React application using FontAwesome icons. When attempting to render icons using the FontAwesomeIcon ponent 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 inpatible.
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-ponents";
import contactcss from "./Contact.module.css";
import Card from "../../ponents/ui/Card";
import { blueHex } from "../../colors";
import grid from "../../resources/blueGrid.png";
// Styled ponent 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=";
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="/">
<FontAwesomeIcon
className={contactcss.instagram}
icon={faInstagram}
/>
</a>
<a href=".usyd">
<FontAwesomeIcon
className={contactcss.facebook}
icon={faFacebook}
/>
</a>
<a href=";>
<FontAwesomeIcon
className={contactcss.discord}
icon={faDiscord}
/>
</a>
<a href="/">
<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 petitions
</p>
<a
href=".apps.googleusercontent&redirect_uri=https%3A%2F%2Fgdscmunity.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
I'm working on a React application using FontAwesome icons. When attempting to render icons using the FontAwesomeIcon ponent 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 inpatible.
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-ponents";
import contactcss from "./Contact.module.css";
import Card from "../../ponents/ui/Card";
import { blueHex } from "../../colors";
import grid from "../../resources/blueGrid.png";
// Styled ponent 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./gdscusyd/">
<FontAwesomeIcon
className={contactcss.instagram}
icon={faInstagram}
/>
</a>
<a href="https://www.facebook./gdsc.usyd">
<FontAwesomeIcon
className={contactcss.facebook}
icon={faFacebook}
/>
</a>
<a href="https://discord./channels/872033047652990986/872033047652990989">
<FontAwesomeIcon
className={contactcss.discord}
icon={faDiscord}
/>
</a>
<a href="https://www.linkedin./pany/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 petitions
</p>
<a
href="https://accounts.google./o/oauth2/auth/oauthchooseaccount?client_id=857409878587-im3f0si9p11h41a6aeiil7cs37frkubb.apps.googleusercontent.&redirect_uri=https%3A%2F%2Fgdsc.munity.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
Share Improve this question asked Dec 10, 2023 at 7:02 Jerome KansasJerome Kansas 471 silver badge3 bronze badges4 Answers
Reset to default 4My 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 plaining and I was able to continue.
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-mon-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" />
According to this article, you should change a bit your code, https://fontawesome./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 ponent,
<FontAwesomeIcon
className={contactcss.instagram}
icon={faInstagramIcon}
/>
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>