今回はReactを活用したプロジェクトで、FontAwesomeで利用可能なアイコンを表示する方法について紹介します。
FontAwesomeとは
まず、FontAwesomeとは、もともとTwitter Bootstrapと呼ばれるUIフレームワークの中で利用可能であったフォントアイコンやSVGが、独立したプロジェクトとなったデータセットです。
2019年3月現在、バージョンは5.8.1、無料で利用可能なアイコンの数は1513 個、有料(年間$60)で利用可能なアイコン数は5097個となっています。
基本的には無料版で十分な種類のアイコンが用意されています。
今回はこのFontAwesomeをReactのプロジェクトで利用する方法について、紹介します。
Reactプロジェクトの準備
基本的には、create-react-appコマンドを使って生成されるプロジェクトのファイル構成を利用します。また、変更するファイルは、srcディレクトリ直下にあるindex.jsとApp.jsです。
FontAwesomeの導入方法
まず、次のコマンドを実行して、必要なライブラリをプロジェクトにインストールします。
# npm i --save @fortawesome/fontawesome-svg-core # npm i --save @fortawesome/free-solid-svg-icons # npm i --save @fortawesome/react-fontawesome
次に、index.jsに次の内容を追記します。
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faIgloo } from '@fortawesome/free-solid-svg-icons'
library.add(faIgloo)
ここで、私が参考にしていたサンプルでは上記のように記述されていたのですが、私の場合、2行目がなくても問題なく表示できました。
次にApp.jsのrender関数のJSXの部分を次のように書き換えます。
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
...
render() {
return
(<div>
<FontAwesomeIcon icon={["fab", "igloo"]} />
</div>);
}
サンプルでは、JSXのFontAwesomeIconのicon引数の値は”igloo”で良いと書かれているのですが、私の場合はmaterial-uiライブラリを共存させているせいか表示されず、上記の方法で解決しました。
参考サイト
