## はじめに
Next.jsでFontAwesomeを使用できるようにしたので、メモとして書いておきます。

## インストール
以下のコマンドでインストールする。

### 1. SVGコアパッケージをインストールする。

**npmを使用する場合**
![img](/mosaic-code.jpg)
**yarnを使用する場合**
![img](/mosaic-code.jpg)

### 2. アイコンパッケージをインストールする。
**npmを使用する場合**
![img](/mosaic-code.jpg)

**yarnを使用する場合**
![img](/mosaic-code.jpg)
### 3. react-fontawesomeパッケージをインストールする。

**npmを使用する場合**
![img](/mosaic-code.jpg)

**yarnを使用する場合**
![img](/mosaic-code.jpg)

## 使い方
以下のように、FontAwesomeをインポートしてきます。
今回は、時計のアイコンを使用するため、以下のように書いていきます。
#### インポート文
![img](/mosaic-code.jpg)
#### アイコンの使用
そのまま使用すると、かなり大きく表示されてしまうので、CSSで調整する必要があるかもしれないです。
![img](/mosaic-code.jpg)

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)
[cv:issue_marketplace_engineer]

## はじめに
Next.jsでFontAwesomeを使用できるようにしたので、メモとして書いておきます。

## インストール
以下のコマンドでインストールする。

### 1. SVGコアパッケージをインストールする。

**npmを使用する場合**
```
npm i --save @fortawesome/fontawesome-svg-core
```
**yarnを使用する場合**
```
yarn add @fortawesome/fontawesome-svg-core
```

### 2. アイコンパッケージをインストールする。
**npmを使用する場合**
```
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
```

**yarnを使用する場合**
```
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
```
### 3. react-fontawesomeパッケージをインストールする。

**npmを使用する場合**
```
npm i --save @fortawesome/react-fontawesome@latest
```

**yarnを使用する場合**
```
yarn add @fortawesome/react-fontawesome@latest
```

## 使い方
以下のように、FontAwesomeをインポートしてきます。
今回は、時計のアイコンを使用するため、以下のように書いていきます。
#### インポート文
```
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock } from "@fortawesome/free-solid-svg-icons";
```
#### アイコンの使用
そのまま使用すると、かなり大きく表示されてしまうので、CSSで調整する必要があるかもしれないです。
```
<FontAwesomeIcon icon={faClock} className="h-3 mr-1" />
```

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)


はじめに

インストール

1. SVGコアパッケージをインストールする。

続きを読むには単価診断を受けてください（30秒）