GatsbyでFont Awesomeを使いたい

11487 ワード
gatsby React FontAwesome FontAwesome テキストリンク

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 （キャメルケース）

ほんでは

参考