目次
はじめに
公式パッケージとして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ファイルに書き込みます。
|
1 |
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> |
一応これでも表示されるのですが、次のようにReactのレンダリングでアイコンを変えたいときに、表示が変更されないという問題が発生しました。
これはfont-awesome JavascriptではReactのリレンダリングをトリガーにして再描画されないためです。
|
1 2 3 |
<span className="icon"> <i className={isEdited ? "fas fa-check" : "fas fa-pen"}></i> </span> |
これを解決するために公式で提供しているCSS用のCDNを使います。
Getting Started on the Web(Web Fonts & CSS)
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> |
公式のサイトで最新のCDNが提供されているのでコピーして使用してください。