🍢

【Typescript+Next.js】にFontAwsomeを追加

2022/08/14に公開

Next.js

こんにちは！
今回は、プロジェクト時にFontAwsomeを使用したので、追加した時の手順を書いてみました。
１分でも早く調べる時間の短縮になれば幸いです。

開発環境

Mac
vscord
Typescript導入済み
Next.js導入済み

手順

1.パッケージのインストール

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

※フリーのアイコンを使ています。
2.アイコン選択
https://fontawesome.com/icons/　
例、

例で虫眼鏡を選択してみました。
画像が大き過ぎてすみません、、、、

HTMLのコードをコピーする

<i class="fa-solid fa-magnifying-glass"></i>

後ほどコードを書き換えていきます。
fa-magnifying-glass　→　faMagnifyingGlass

3.使用したいページにインポートする

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

const search = () => (
  <>
    <p>検索</p>
    <FontAwesomeIcon icon={faMagnifyingGlass} />
  </>

4.サイズなどのカスタマイズをする

<FontAwesomeIcon icon={faMagnifyingGlass} size="lg" color="#fff" />

お疲れ様でした。
何か間違いがありましたら、ご指摘頂けると幸いです。

開発環境

手順

Discussion