ReactでFontAwesomeを使いたいときのやり方です。
目次
【事前準備】FontAwesomeをインストールする
まず、以下のコマンドを実行してFontAwesomeをインストールします。
インストールするものは5種類ありますが、インストール必須なものとアイコンによって必要なものの2つに分かれます。
インストール必須
インストール必須なのは2種類です。以下の2つのコマンドを実行してください。
npm install @fortawesome/react-fontawesome
npm install @fortawesome/fontawesome-svg-core
# npm ではなく yarn を使用している場合は、npm install を yarn add に置き換えてくださいアイコンによって必要
こちらは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内で使用する
使用したい箇所にこの形で使用します。
{/* faStarアイコンを使用するとき */}
<FontAwesomeIcon icon={faStar}/>おまけ
一気にインポートする
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes, faStar, faLink } from "@fortawesome/free-solid-svg-icons";
import { faTwitter, faFacebook, faInstagram } from "@fortawesome/free-brands-svg-icons";同じ名前のアイコンをインポートする
as を使って、使用するうえでの名前を変えてあげましょう。
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { faStar as regularStar } from "@fortawesome/free-regular-svg-icons";
