自分の SNS アカウントへのリンクは、アイコンのみで良さそうなので Font Awesome を導入した。 (個人的にはタイポグラフィなサイトが好みなので、文字多めな傾向はある。)
必要な Package をインストール
このサイトは、Gatsby で作っているので、React で利用するのとほぼ一緒な感じで設定した。
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/react-fontawesome次に必要な icon の方もインストール。 Twitter のアイコンなどを含んでいる ‘brands’ と Feed アイコンをいったアイコンも使いたいので ‘solid’ の方をインストール。
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons実際に使ってみる
使いたい箇所のコンポーネントをゴニョゴニョ修正。 Font Awesome で使いたいアイコンを探して、表記を camel case に読みかえて import する。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSquareRss } from "@fortawesome/free-solid-svg-icons"
import {
faTwitter,
faGithub,
faSpeakerDeck,
faInstagram,
} from "@fortawesome/free-brands-svg-icons"あとは使いたい箇所で、以下のようにアイコンを呼びだせば表示された。
<a href="https://twitter.com/nawoto">
<FontAwesomeIcon icon={faTwitter} />
</a>スタイルを読みこんでおく
リロード時などに Font Awesome のアイコンの表示が崩れないように事前に Style を読みこんでおくために、gatsby-broeser.js に以下を追記。
// CSS style for Font Awesome
import "@fortawesome/fontawesome-svg-core/styles.css"無事にアイコンが表示できたはず 🎉
