Reactでfont-awesomeのアイコンを表示する方法

投稿者: | 2019年3月29日

今回は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の導入方法

まず、次のコマンドを実行して、必要なライブラリをプロジェクトにインストールします。

次に、index.jsに次の内容を追記します。

ここで、私が参考にしていたサンプルでは上記のように記述されていたのですが、私の場合、2行目がなくても問題なく表示できました。

次にApp.jsのrender関数のJSXの部分を次のように書き換えます。

サンプルでは、JSXのFontAwesomeIconのicon引数の値は”igloo”で良いと書かれているのですが、私の場合はmaterial-uiライブラリを共存させているせいか表示されず、上記の方法で解決しました。

 

参考サイト

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください