デザイナーの田中です。

TimeCrowdでは既存のアイコンセットの他に、ほんのすこしですが自作のアイコンも使っています。
たとえば停止ボタンのすこしふくらんだ■なんかも。

つくったアイコンはアイコンフォント(Webfont)にして、アプリの方から利用しているのですが……
アイコンフォントにするのがけっこうめんどうくさいのです。

毎回、既存のアイコンセットとまとめてIcoMoonでアイコンフォント化しているのですが、
これをローカルでアイコン画像を追加したら自動的にアイコンフォントにしてくれるようにしてみます。
オートメーション。

webpackでwebfonts-loaderを使う

…といっても最近は便利なもので、webpackで一発なのでした。
webpackは色々思うところもありますが、こういう目的だととても便利です。

いくつか類似のものはあるようですが、webfonts-loaderを使用させていただきます。

インストール

npm install webfonts-loader --save-dev

設定

GitHubにあった設定そのままではアプリからの読み込みに問題があったため、少々変えました。

webpack.config.js

{
    test: /\.font\.js/,
    use: [
      'style-loader',
      'css-loader',
      'webfonts-loader'
    ]
  }

myfont.font.js

module.exports = {
  'files': [
    'path/to/svg-dir/**/*.svg'
  ],
  'fontName': 'myfonticons',
  'classPrefix': 'icon-',
  'baseSelector': '.icon',
  'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
  'embed': true, // 埋め込む
  'fileName': 'app.[fontname].[chunkhash].[ext]'
}

結果

これでIllustratorでつくったアイコンをSVGに出力して指定場所に置くと、
自動的に検知して勝手にアイコンフォントを生成してくれるようになりました！

アイコンフォント化するのがめんどうで心が折れることもなくなりました。