类型“IconDefinition”无法使用 React 在 FontAwesome 中分配给类型“IconProp”

Question

我正在使用 FontAwesome 图标开发 React 应用程序。当尝试使用 @fortawesome/react-fontawesome 中的 FontAwesomeIcon 组件渲染图标时，我遇到了以下错误：

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"'?

这是我的代码片段：

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;

有人可以帮助我理解为什么会发生此错误以及如何解决它吗？我已经检查了 FontAwesome 图标的导入和使用，但我仍然面临这个问题..我什至使用了正确的软件包，例如“@fortawesome/react-fontawesome”。

附加信息：

使用React v17.0.2 FontAwesome 软件包： @fortawesome/react-fontawesome @fortawesome/free-brands-svg-icons

Answer 1

根据这篇文章，您应该稍微更改一下代码，https://fontawesome.com/v5/docs/web/use-with/react#typescript

试试这个代码，

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' });

然后，在你的组件中，

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