TypeScript에서fortawesome의free-brands-svg-Cons를 사용하여 발생하는 유형 오류를 수정합니다

여러분이 가장 좋아하는 FoontAwesome를 모두 읽으면 사이즈가 커집니다.
따라서 사용할 아이콘만 읽고 개별적으로 표시합시다!!!
공식 리액션.js의 소개
https://fontawesome.com/how-to-use/on-the-web/using-with/react

얼른 써봐.

그래서 공식적으로 free-solid-svg-ins를 쓰면 이런 느낌이에요.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faPen } from "@fortawesome/free-solid-svg-icons";
library.add(faPen);

export const EditButton: React.FC = () => (
  <button>
    編集する
    <FontAwesomeIcon icon={faPen} />
  </button>
);

펜 아이콘 추가
다음 Google 로그인 버튼을 만들려면free-solid-svg-Cons에 들어가지 않았기 때문에 npm install에 다른 프로그램 라이브러리를 입력하십시오!

Free-brands-svg-icons를 사용해 보세요.

그래서 같은 정의로 사용해 보면

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faGoogle } from "@fortawesome/free-brands-svg-icons";
library.add(faGoogle);

export const GoogleLoginButton: React.FC = () => (
  <button>
    <FontAwesomeIcon icon={faGoogle as IconDefinition} />
    Googleアカウントでログイン
  </button>
);

Icon Definition 유형의 매개변수는 Icon Definition OrPack 유형의 매개변수에 지정할 수 없습니다.
월~형 오류😭
그래서 Icon Definition이 됐어요.

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library, IconDefinition } from "@fortawesome/fontawesome-svg-core";
import { faGoogle } from "@fortawesome/free-brands-svg-icons";
library.add(faGoogle as IconDefinition);

export const GoogleLoginButton: React.FC = () => (
  <button>
    <FontAwesomeIcon icon={faGoogle as IconDefinition} />
    Googleアカウントでログイン
  </button>
);

이렇게 하면 TypeScript에 화가 나지 않고 아이콘이 표시됩니다.대단히 기쁘다.