ブログにいい感じのアイコンを使いたい

きっかけ 💡

技術ブログや OSS の web サイトで、フッター部分に SNS や Github のアイコンを見かけることがあります。

Nuxt.js で作成されている東京都新型コロナウイルス対策サイトでは、以下のようになっています。

こうやって Github 等のアイコンリンクが貼ってあると、なんだか技術的にイケてるイメージが湧いてくるのは私だけでしょうか。 こんな感じのアイコンが自分のブログにも欲しい...。

ということで実装してみました。

使用するライブラリ 📦

ぱっと思いつくのが Font Awesome だったのですが、いろいろ調べてみたところ React Icons が一番よさげでした！

React Icons は Font Awesome, Bootstrap Icons, etc... など有名どころのアイコンが入っていてかなり種類が豊富 👏

React のプロジェクトだったらこれ一択なのかもしれません...。

実装 🔨

以下コマンドでインストールします。

$ yarn add react-icons

今回は Font Awesome の Github, Twitter のアイコンを貼りたいので、使用したいファイルにてインポートします。

import { FaGithub, FaTwitter } from "react-icons/fa";

...

　 react-icons/xx の xx 部分は、 Font Awesome なら Fa、Bootstrap なら bs となるようですね。

あとはコンポーネントとして使用すればOKです。

<a className='github_icon_link' href="https://github.com/moto-sbt/nextjs-blog">
    <FaGithub size={40} />
</a>
<a className='twitter_icon_link' href="https://twitter.com/moto_sbt">
    <FaTwitter size={40} />
</a>

できたもの 💮

CSS でアイコンの色とか調整して...以下のようにできました 🎉

コード変更の詳細は以下です。