Gatsbyほんと便利ですよね
今回はGatsbyでFontAwesomeを使用する方法について
インストールからフォントアイコンを表示するところまでを説明します
実行環境とバージョン一覧
- Gatsby.js v2.18.4
- react-fontawesome v0.1.7 (Font Awesome 5)
ちなみに、Gatsbyは以下のスターターを使用してビルドしました↓
$ gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
また、この記事では上記スターターでビルドしたGatsbyプロジェクトのbio.jsに
記述していく程で話を進めていきます
インストール
この記事ではFontAwesomeを使用するために以下の３つをインストールします
@fortawesome/react-fontawesome@fortawesome/fontawesome-svg-core@fortawesome/free-solid-svg-icons
npmの場合
$ npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
もしくは
yarnの場合
$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
使用方法
インポート
以下のコードをbio.jsに追記する
bio.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
フォントアイコンの表示
呼び出し方法にバリエーションがあるのでそれぞれ紹介する
アイコンセットをまとめて呼び出す
企業系のフォントアイコンを使用する場合は以下を上記に加えてインポートする
bio.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons' // 追加
インポートしたアイコンセットをライブラリに追加する
bio.js
library.add(fab)
使用したいフォントアイコンをFontAwesomeIconに引数として渡す
お好きな箇所に以下のコードを追加するとTwitterアイコンが表示される
bio.js
<FontAwesomeIcon icon={['fab', 'twitter']} />
特定のフォントアイコンのみを呼び出す
特定のフォントアイコンのみを使用する場合、
インポート時に使用するフォントアイコン名を記述する
bio.js
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fabTwitter } from '@fortawesome/free-brands-svg-icons' //追加
インポートしたフォントアイコンをライブラリに追加する
bio.js
library.add(fabTwitter)
bio.js
<FontAwesomeIcon icon={fabTwitter} />
実際に使ってみる
bio.js
import { 割愛 } from '割愛'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
const Bio = () => {
const data = useStaticQuery(graphql`割愛`)
const { author, social } = data.site.siteMetadata
library.add(fab) // FontAwesomeのライブラリ読み込み
return (
<div>
<Image/>
<p>
<strong>{author}</strong>
<a href={`https://twitter.com/${social.twitter}`}>
<FontAwesomeIcon icon={['fab', 'twitter']} /> {/* ツイッターアイコン */}
</a>
<span>うぇぶとかかいはつ日記</span>
</p>
</div>
)
結果：
おまけ
無料のフォントアイコン一覧：Font Awesome
Gatsbyでフォントアイコンを使用する場合はフォントアイコン名を
キャメルケースで記述すれば使用できるはず（はず）
例)
battery-full （ケバブケース）
↓
batteryFull （キャメルケース）
ほんでは