React + Typescript + Next.js に font-awesome を追加

概要

React + Typescript + Next.js プロジェクトでfont-awesomeを使えるようにする
だいたいここに書いてある↓
https://www.npmjs.com/package/@fortawesome/react-fontawesom

手順

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

• 色々パッケージがあるらしいので、用途に応じて入れる
• 今回はとりあえずこの2つを使った例

npm でやる場合

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

yarn でやる場合
以下 npm i --save は yarn add に読みかえればokなので、省略

$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

2. アイコンを選ぶ(確認中; 現状うまくいっているやり方)

1. https://fontawesome.com/icons/　にいく
2. フリーのアイコンを選ぶ
3. HTML の class 名を camelCase に変える →次のステップで使う

例 https://fontawesome.com/icons/chevron-right?style=solid
アイコンの上の <i class=... のところを見ると、

<i class="fas fa-chevron-right"></i>

となっている
クラス名は fa-chevron-right なので、faChevronRight としてメモっとくか覚えと
く

3. アイコンを入れたいページでインポート

• 今回は chevron-right というアイコンを使った例

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

const myComponent = () => (
  <>
    <p>right icon</p>
    <FontAwesomeIcon icon={faChevronRight} />
  </>

おまけ サイズとか色とかいじってみる

• サイズを大きく、アイコンの色を白くしたいときは、こんな感じ↓で書く
• 他にも回転とかいじれるらしい
• 詳しくはこちら https://www.npmjs.com/package/@fortawesome/react-fontawesome#features

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