ReactでFont Awesomeを使う一番簡単な方法

  • このエントリーをはてなブックマークに追加
  • Pocket

はじめに

公式パッケージとしてreact-fontawesomeが提供されていますが、さくっとReactプロジェクトに入れて使いたいときがあります。

CDNで提供されているものを使えば簡単にできるのですが、ちょっとハマったのでメモ。

動作環境

  • macOS High Sierra 10.13.6
  • react 16.4.0
  • Font Awesome v5.3.1

公式CDN

通常は以下のJS版のCDNをindex.htmlで読み込ませて使用するみたいです。

create-react-appで作成したプロジェクトの場合は[Public]ディレクトリ以下のindex.htmlファイルに書き込みます。

一応これでも表示されるのですが、次のようにReactのレンダリングでアイコンを変えたいときに、表示が変更されないという問題が発生しました。

これはfont-awesome JavascriptではReactのリレンダリングをトリガーにして再描画されないためです。

これを解決するために公式で提供しているCSS用のCDNを使います。

Getting Started on the Web(Web Fonts & CSS)

公式のサイトで最新のCDNが提供されているのでコピーして使用してください。

参考

react-fontawesome

Getting Started on the Web(Web Fonts & CSS)

Toggling Font Awesome 5 icon with React

スポンサーリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*