ReactでFont Awesomeのアイコンを使う
インストール
npm install @fortawesome/react-fontawesome
//使いたいパッケージをインストール
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons基本の使い方
Font Awesomeを読み込む。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCloudArrowDown } from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";アイコンを表示する。
<FontAwesomeIcon icon={faCloudArrowDown} />
<FontAwesomeIcon icon={faGithub} />サイズ変更
2xs〜2xl、または1x〜10xで指定可能。
<FontAwesomeIcon icon={faCloudArrowDown} size="2xs" />
<FontAwesomeIcon icon={faCloudArrowDown} size="xs" />
<FontAwesomeIcon icon={faCloudArrowDown} size="sm" />
<FontAwesomeIcon icon={faCloudArrowDown} />
<FontAwesomeIcon icon={faCloudArrowDown} size="lg" />
<FontAwesomeIcon icon={faCloudArrowDown} size="xl" />
<FontAwesomeIcon icon={faCloudArrowDown} size="2xl" />
<FontAwesomeIcon icon={faGithub} size="1x" />
<FontAwesomeIcon icon={faGithub} size="2x" />
<FontAwesomeIcon icon={faGithub} size="3x" />
<FontAwesomeIcon icon={faGithub} size="4x" />
<FontAwesomeIcon icon={faGithub} size="5x" />
<FontAwesomeIcon icon={faGithub} size="6x" />
<FontAwesomeIcon icon={faGithub} size="7x" />
<FontAwesomeIcon icon={faGithub} size="8x" />
<FontAwesomeIcon icon={faGithub} size="9x" />
<FontAwesomeIcon icon={faGithub} size="10x" />色変更
<FontAwesomeIcon icon={faCloudArrowDown} style={{ color: "gray" }} />リンク付き
<a href="https://github.com/your-username">
<FontAwesomeIcon icon={faGithub} size="lg" />
</a>エラーになる場合
Font Awesomeがちゃんとインストールされているか確認する。
npm ls @fortawesome/react-fontawesomeもし(empty)やmissingと表示されるなら、インストールされていません。
ちゃんとインストールされているのにエラーになっている場合は再起動してみます。
Viteでは、新しいパッケージをインストールした後に開発サーバーが依存関係を認識できず、エラーになることがあります。※私はこれでした…