HaneCa

独り立ちへ向けた長い道

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

投稿日: 2019年3月29日 最終更新日: 2019年8月21日

今回は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ライブラリを共存させているせいか表示されず、上記の方法で解決しました。

 

参考サイト

 

 

コメントを残す

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

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