はじめに
フリーのアイコンを使ってブログを装飾してみる。 赤いところにアイコンを配置していく。
準備
react-fontawesomeをインストールする。
npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-coreフリーで利用できるスタイルをインストールする。
npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons記事アイコン追加
index.jsでfontawesomeをimportする。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"記事タイトルの前にペンのアイコンをつけてみる。
https://fontawesome.com/v5.15/icons/ でアイコンを探す。
今回はsolidタイプのfa-pen-squareを使う。
import { faPenSquare } from "@fortawesome/free-solid-svg-icons"タイトルの前にアイコンタグを挿入する。
<h2>
<Link to={post.fields.slug} itemProp="url">
<span itemProp="headline"><FontAwesomeIcon icon={faPenSquare} /> {title}</span>
</Link>
</h2>結果を確認、アイコンが表示されている。
その他のアイコン追加
プロフィールのTwitterの箇所をアイコンに変えて、ついでにGithubのアイコンも追加していく。
bio.jsでimportしておく。
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
faTwitter,
faGithub
} from "@fortawesome/free-brands-svg-icons"続けて、該当の箇所にFontAwesomeIconを入れていく。
Githubの変数はgatsby-config.jsに新たに追加。
<p>
Written by <strong>{author.name}</strong>
{` `}
<a href={`https://twitter.com/${social?.twitter || ``}`}>
<FontAwesomeIcon icon={faTwitter} />
</a>
{` `}
<a href={`https://github.com/${social?.github || ``}`}>
<FontAwesomeIcon icon={faGithub} />
</a>
</p>結果を確認。問題なし。
以上、簡単に使えて感動。
今後はheader.js、footer.jsに分けて構造も変えていきたいところ。
一瞬大きく表示される問題
このままデプロイして、アクセスするとロード時に大きすぎるアイコンが一瞬表示される。
原因はfontawesomeのSVGが表示されたあとにcssが適用されるため。
index.jsにcssを先読みし、コンポーネント内でのcss用を無効にするよう設定。
import "@fortawesome/fontawesome-svg-core/styles.css"
import { config } from "@fortawesome/fontawesome-svg-core"
config.autoAddCss = false