🍢
【Typescript+Next.js】にFontAwsomeを追加
こんにちは!
今回は、プロジェクト時にFontAwsomeを使用したので、追加した時の手順を書いてみました。
1分でも早く調べる時間の短縮になれば幸いです。
開発環境
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