【React】FontAwesomeの使い方(同じ名前のアイコンをインポートする場合もあり)

React

ReactでFontAwesomeを使いたいときのやり方です。

【事前準備】FontAwesomeをインストールする

まず、以下のコマンドを実行してFontAwesomeをインストールします。

インストールするものは5種類ありますが、インストール必須なものアイコンによって必要なものの2つに分かれます。

インストール必須

インストール必須なのは2種類です。以下の2つのコマンドを実行してください。

npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core

アイコンによって必要

こちらは3種類あります。FontAwesomeには、brands, regular, solid の3つのタイプのフォントがあるためです。心配な方は全部インストールしておいても良いかもしれません。

コマンドは上から順に、brands, regular, solidのものです。

npm install @fortawesome/free-brands-svg-icons
npm install @fortawesome/free-regular-svg-icons
npm install @fortawesome/free-solid-svg-icons

インストールこれでFontAwesomeを使う準備は完了です!

FontAwesomeをインポートする

実際にスクリプトを書いていきましょう。まず、FontAwesomeを使用するファイルで、FontAwesomeをインポートします。以下のような感じです。

コピペしたい方はこちら↓

import React from 'react'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

使用するアイコンの属性を確認

以下のアイコンを見てください。

これは、「Regular Style」「fa-star」というアイコンです。

使用するアイコンをインポートする

先ほど、使用したいアイコンは「Regular Style」の「fa-star」と確認したので、以下のようにインポートします。

  • fa-star → faStar
  • Regular Style → @fortawesome/free-regular-svg-icons

インポート先は、アイコンの種類によって、下記3種類あるので気をつけてください。

"@fortawesome/free-regular-svg-icons" 
"@fortawesome/free-solid-svg-icons"
"@fortawesome/free-brands-svg-icons"

HTML内で使用する

使用したい箇所にこの形で使用します。

<FontAwesomeIcon icon={インポートしたアイコン名}/>

以下は例です。

おまけ

一気にインポートする

同じ名前のアイコンをインポートする

as を使って、使用するうえでの名前を変えてあげましょう。

タイトルとURLをコピーしました