React-iconsで簡単にサイトにアイコンを追加する
目標
このようにFont awsomeのようなアイコンをReact製のサイトに追加したい。 今回はGatsby製のサイトに導入する方法を紹介する。
ライブラリ
React-icons 様々な種類のアイコンを簡単にReactに導入できるライブラリ。 Fontawsome, Remix iconsなどに対応している。
インストール
npm install @react-icons/all-filesnpm インストールして使うだけ。今回はTwitterとGithubのアイコンを設置したい。
使用
import { RiGithubLine } from "@react-icons/all-files/ri/RiGithubLine"
import { RiTwitterLine } from "@react-icons/all-files/ri/RiTwitterLine"
//...
<a
rel="noreferrer"
target="_blank"
>
<RiTwitterLine size="3rem" />
</a>
<a rel="noreferrer" target="_blank" href\="https://github.com/tofujlg">
<RiGithubLine size="3rem" />
</a>
とても簡単に導入できた。