新しくなったFont Awesome 5では、SVG+JavaScriptでアイコンを表示する仕組みが取られています。この枠組に乗っかれば、自分でアイコンを追加することもできるのではないか…と思って試してみました。
おことわり
言うまでもないかもしれませんが、このような使い方はFont Awesomeの作者が本来想定したものではないので、きちんと動作することは一切保証しません。そして、従来の「Webフォントを使う」ようなやり方ではもちろんこの手は使えません。
でも、やってみる
ここでは、試しにQiitaの「Q」をアイコン化してみることにしましょう。
アイコンのデータ構造
作業に入る前に、アイコンのデータ構造を確認しておきましょう。fontawesome.findIconDefinition（リファレンス）でアイコンを定義したハッシュが得られますが、以下のようになっています。
{
"prefix": "fas",
"iconName": "user",
"icon": [
512,
512,
[],
"f007",
"M962…-112z"
]
}
それぞれの意味は、以下のようになっています。
-
prefix…アイコンを分類するプレフィックス。仕組み上、組み込みのfas、far、fal（アイコンが定義されているのは有料版のみ）、fabのどれかでないといけません。 -
iconName…アイコン名。このアイコンであれば、fa-userで参照される、という次第です。 -
icon[0]・icon[1]…アイコンの幅・高さ。幅と高さは片方が512、もう片方も32の倍数、ということが多いようです。 -
icon[2]…リガチャの指定。なければ空配列となっています。 -
icon[3]…文字コード。Webフォント版のFont Awesomeでは、この文字コードでアイコンを呼び出します。 -
icon[4]…SVGのパス。実際にはかなり長いです。
SVGデータ（パス）を準備する
もちろん必要なのはパスだけなのですが、パス1本だけ操作するのは逆に難しいので、ある程度のところまではSVGとして処理します。
- 元になるSVGデータを用意する…Qiitaの場合、左上のロゴがSVGだったので、これから抜き出して保存すればかんたんにファイルとして得られました。
- 必要なデータをパス1本で用意する…保存したSVGをInkscapeなどSVGエディタで開いて、不要な部分の削除、パス以外のものはパスへの変換、複数あれば統合などを行って、必要な描画を1本のパスにまとめましょう。
- サイズの調整…どうやら、FontAwesomeでは512pxが1つの基準になっているので、これに合わせてアイコンを拡大しましょう。Qの場合は512×512の正方形がちょうどよい感じでした。
- 最適化…そのまま使ってもいいのですが、Inkscapeで編集したままだと「134.41882」のように細かい端数が付いています。アイコンで表示するのにそんな細かい精度は不要なので、SVGOMGなどを使って、端数を丸めておきましょう。
あとはテキストファイルでSVGを開けば、<path d="....." />の形でパスを得られます。
アイコンとして登録する
パスが準備できればあとは一息です。上で書いたような形式に従って、オブジェクトを作りましょう。なお、既存のものとかぶらないようにすることが必要ですが、「文字コード」については、勝手に投入したものはコードが存在しないので、'xxxx'のようにコードとして認識しないものを適当に入れておく、ということで大丈夫そうでした。また、i2svgが動き出すDOMContentLoadedより前に仕掛けましょう。
fontawesome.library.addで登録すれば、あとは<i class='fab fa-qiita'></i>のように呼び出すなり、公式バインディングのあるReact・Vueなり、それ以外でも自分でやってみたRiotやpicodom対応もありますので、好きなように使うことができます。