🍲

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

2020/10/08に公開2件

React

TypeScript

tech

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

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

公式のReact.jsの案内

さっそく使ってみる

ってことで公式に沿って 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 に変えて、、、

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

さっそく使ってみる

free-brands-svg-icons を使ってみる

Discussion