【ISSUE】Next.jsでFontAwesome を使用できるようにする。

0

2024年12月23日 8:40

はじめに

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

インストール

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

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

npmを使用する場合
img
yarnを使用する場合
img

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

npmを使用する場合
img

yarnを使用する場合
img

3. react-fontawesomeパッケージをインストールする。

npmを使用する場合
img

yarnを使用する場合
img

使い方

以下のように、FontAwesomeをインポートしてきます。
今回は、時計のアイコンを使用するため、以下のように書いていきます。

インポート文

img

アイコンの使用

そのまま使用すると、かなり大きく表示されてしまうので、CSSで調整する必要があるかもしれないです。
img

最後に

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

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。