FontAwesome サブセット作成

FontAwesome サブセット作成

Web上では外部サービスを使用して FontAwesome のサブセットを作成する方法をよく見かけるが、
JavaScript版であればコード上にアイコンのデータが直書きされているので、スクリプトでサブセットを
作成する。

無料のアイコンしか使用しないため、solid.js から必要なアイコンのみを抽出した yyicon.js を作成する。
ここで作成した yyicon.js と配布されている fontawaesome.min.js と取り込めば必要なアイコンのデータだけ
読み込んで表示が可能。

作成時点では solid.js が 590KB ほどであるのに対して yyicon.js は 10KB 程度となっているので
サブセット作成としては十分。
minify も一度やってみたが効果はほぼなかったのであえて実施していない。

1
2
3
4
5
6
7
8
9
10
11
12
# 使用しているアイコン一覧取得
grep -nR "fas " ${YY_HEXO_HOME}/themes/vim | sed -e 's/.*fas fa-\([^"]\+\)".*/"\1"/' | sort | uniq > iconlist

# 使用しているアイコンのデータを抽出
grep -f iconlist solid.js > targeticonlist

# solid.js のアイコンデータを削除した hoge.js を作成
sed -z -e "s/  var icons = {.* };/  var icons  = {\n  };/" solid.js > hoge.js

# 先に抽出しておいたアイコンデータのみを適用した yyicon.js を作成
sed '/  var icons  = {/r targeticonlist' hoge.js > yyicon.js

2020-12-06 12:28
  #FontAwesome
2020-12-06 12:28
  #FontAwesome