少し前にFont Awesome 5がリリースされましたが、4以前とエコシステムから大きく変わるものでした。
SVG+JavaScriptがメインに
Font Awesome 4まではWeb Fontで作られていましたが、Font Awesome 5では「JavaScriptで動的に<svg>タグを生成して、文章中に直接埋め込む」という手法がメインとして取り上げられていました。
このような形とすることで、
- WebpackやRollupのTree Shaking（
importした分のみ読み込む）を利用して、必要なアイコンだけ組み込むことが容易に行える - Node.jsによるサーバサイドレンダリングが可能となる
- React.jsなど、仮想DOMフレームワークとの親和性向上
などといったメリットがあります。一方で、「SVGを埋め込む」ということでいくつか気になる点がありましたが、巧妙に解消していました。
- 周りのフォントと色が合うのか…
fill="currentColor"を使うことで、文章のフォント色をそのまま使うことが可能 - あとから
<i>を追加した場合や、アイコンのクラスを変更した場合はどうなるのか…MutationObserverを入れることで、タイマーなしで変更を追随できるようにしてあった - Font Awesome 4との互換性…互換レイヤーがあるので、名前の違うアイコンなどもそのまま使える
Riotから使ってみる
Vue.jsやReact.jsについては公式のバインディングがありますが、Riot.jsからも使いたいと思ったので、自分でjkr2255/riot-fontawesomeを作ってみました。
fontawesome.iconの結果として得られるものは、
-
html…HTMLソース -
node…DOMノード -
abstract…VDOMのhに投げるのにピッタリとなる、仮想DOM的な要素の詳細
と、3つの形式があります。Riotに直接ASTを投げる方法がわからなかったのと、DOMノードが取れるのならそれを使うのが手っ取り早いということで、イベントサイクルを見計らってappendChildやreplaceChildではめ込む、という形の実装としています。
実は、これがnpm初登録だったので、環境を整えるのにも少々悪戦苦闘しました。