TypeScriptでfortawesomeのfree-brands-svg-iconsを使うと出る型エラーを直す

公開:2020/10/08
更新:2020/10/08
1 min読了の目安(約1700字TECH技術記事

みんな大好きFontAwesomeは全部読み込むととにかくサイズが大きくなってしまいます。

そのため使うアイコンだけ読み込んで個別に表示するようにしましょう!!!

公式のReact.jsの案内
https://fontawesome.com/how-to-use/on-the-web/using-with/react

さっそく使ってみる

ってことで公式に沿って free-solid-svg-icons を使うとこんな感じ

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-iconsには入っていないので、別なライブラリを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>
);

型 'IconDefinition' の引数を型 'IconDefinitionOrPack' のパラメーターに割り当てることはできません。

げげ〜型エラー😭

ということで IconDefinition に変えて、、、

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に怒られずにアイコンが表示されました。めでたしめでたし。