JavaScript
npm
FontAwesome
React
material-ui

react-fontawesomeなのかreact-faなのかreact-iconsなのか

More than 1 year has passed since last update.

背景

Material-UI (v1.0.0-beta.11)を使っていて、SPAでよくあるPOSTしたタイミングでスピナーを回すUIを作成したのだが、どうやら、 CircularProgress コンポーネントがメモリリークしてしまっているようで、iPhoneのsafariで画面が固まる現象に遭遇した。

Progress - Material-UI

[CircularProgress] Only works with Chrome · Issue #5524 · callemall/material-ui

もちろん、beta版を使用していて、バグが含まれることも承知の上なので、スピナーのUIをMaterial UIにこだわる必要もない、かつ、致命的なバグなので、スピナーのUIはFont AwesomeのSpinnerアイコンを回転させることで対応することにした。

そこで、React環境にFont Awesomeを導入するためのパッケージをいくつか比較した。いかにコストをかけずに、スピナーを回せるかという視点で導入を判断した。

react-font-awesome: ★400+

danawoodman/react-fontawesome: A React Font Awesome component.

結局これを導入した。

font-awesome.min.css ファイルを別途読み込ませれば、下記のI/Fでアイコンを使える。spinプロパティが用意されていて、このプロパティを付与すれば、アイコンが回転する。

sample
<FontAwesome
  name='spinner'
  size='2x'
  spin
/>

react-fa: ★400+

andreypopp/react-fa: Font Awesome icons as React components

こちらは、webpack.configにloaderを足して、アイコンを読み込む。別プロジェクトで導入していたことがあったが、今回はなるべくwebpack.configを触りたくなかったので、導入を見送った。

こちらもspinプロパティが用意されている。

react-icons: ★1200+

gorangajic/react-icons: svg react icons of popular icon packs

Font awesomeの他に、Material、Typiconsも使えるが、正直、Font Awesomeだけで十分なので、YAGNI原則に従って、見送った。

あと、spinプロパティが実装されておらず、自分でcssで回してね、とのことだったので、そこも見送った要因となった。

Spinning icons · Issue #52 · gorangajic/react-icons

その他

Material UIのバグはissueに挙がっていたので、そのうち対応されるかと思う。Material UIのIconsも少し使い勝手が悪いので、一緒にreact-fontawesomeに乗り換えたい所感を抱いている。