Astro で FontAwesome を使用する方法について

ブログに関する指摘をもらうために、XやGithubへ誘導するのが一番ssgとの相性が良く、手っ取り早い方法でありそうである。
そのため、XやGithubへのリンクをアイコンとして表示する必要が生じた。

今回は本ブログで使用しているAstro内でReactコンポーネントとしてFontAwesomeを使用することでアイコンを表示した。
以下で使用方法を記載していく。

方法

まず、以下のコマンドでAstro で Reactコンポーネントを使えるようにする

npx astro add react

これにより、Astro で Reactコンポーネントを使うためのパッケージがインストールされるだけでなく、必要な初期設定も追加される。

次にFontAwesomeに関するパッケージをインストールする。
使用したいアイコンが含まれているパッケージもインストールする必要がある。

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/react-fontawesome
npm install @fortawesome/free-brands-svg-icons

次に適当な jsx ファイル(例えばIcon.jsx)で次のようなコンポーネントを定義する。
以下は Github のアイコンを表示するためのコンポーネントである。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'

config.autoAddCss = false

const Icon = () => {
  return (
    <FontAwesomeIcon icon={faGithub} />
  );
};

export default Icon;

config.autoAddCss = false は React で FontAwesome に対する CSS を有効にするために必要である。
これがないと、めちゃくちゃ大きいアイコンが表示されるため注意が必要。

他は React の文法に従ってコンポーネントを定義すれば良さそう。

AstroのコンポーネントでReactのコンポーネントを使うには以下のように呼び出せば良い。

---
import Icon from "./Icon.jsx";
---
<Icon />

参考