2019-01-23に投稿

GatsbyJSでfontawesomeを使う

ブログのUI開発に必要なやつ

ブログのUI開発にアイコンは、ユーザーの学習コストを下げるという意味で無くてはならないモノだと思っていてその実装をGatsbyではどうするか?について調べた。

結論fontawesomeを採用した。

  • react-icons
  • react-fontawesome
  • react-fa
    実装アイコン数はreact-iconsが最も多くGithubのスター数も多い。しかし、個人で作る上で必要なアイコンはそこまで多くない。あとfontawesomeのバージョンが4系だった(最新は5系)ので5系に対応しているreact-fontawesomeを実装していくことにする。

GatsbyJSにインストール

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

これでOK。fortawesomeはスペルミスじゃないので安心して欲しい。
gatsbyのプラグインじゃないのでgatsby-config.jsはの変更不要。

fontawesomeを早速使ってみる

index.jsを修正し動作確認をする。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

ここの部分でフォントを読み込む。fontawesomeは、直接CDNで読み込んでやるとサイズが大きくGoogleの計測ツールで見るとPageSpeedが著しく下がる。このコンポーネントだと使うフォントだけを抜き出してサブセットを作って書き出してくれる。最高。Layoutに入れ込んでしまえば管理楽になりそう。
あとは、適当な位置にタグを入れて確認しよう。

<FontAwesomeIcon icon={faCoffee} />

0141.jpg
GatsbyJSでfontawesomeを上手く表示できた!
これでイケそうだ。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第11回 GatsbyJSでMarkdownで記事の一覧を表示させよう
第12回 GatsbyJSでMarkdownの記事を表示させよう
第13回 GatsbyJSでfontawesomeを使う
第14回 GatsbyJSでフォントを変更する
第15回 GatsbyJSでMarkdownで画像を表示する

aocory

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント