カスタムIcon Fontsのfontelloをさらに便利に使うために

今更ですが、Icon Font使ってますか？

font-awesome や ionicon, glyphicons 等など、便利なIcon Fontのセットも色々ありますね.

複数のIcon Fontからglyphを選んで自分用のIcon Fontとしたい場合, fontello が便利です。僕も普段からお世話になっています。

fontelloの設定ファイルからmixinを作る

fontelloでは、自分のカスタムweb font(.eot, .svg, .ttf, .woff)と、それを利用するCSSファイルが生成されます。

一方、iconをCSSのクラスではなく、Sassの中から利用したいシーンも存在します.
例えば、 と を使って、開閉状態を表現するclassを生成したい、といったシーンを想像してみてください¹。
htmlから、<span class="icon-minus" ></span> を意図的に別のCSSクラス(この例の場合、opened)の裏側に隠蔽したいケースです.

こんな感じで.scssを書きたい

.some-element {
  &:before {
    @include icon-plus;
  }
  &.opened:bedore {
    @include icon-minus;
  }
}

利用側のhtml

<div class="some-element">...</div>
<div class="some-element opened">...</div>

fontelloの生成ファイルには、mixin(というかscss関連のファイルは何も)は用意されないため、自分で用意します。

下記のようにfontelloのconfig.jsonを読み込み、mixinをまとめた.scssファイルを出力するスクリプトが簡単に作成できます。

createMixins.js

var fs = require('fs'), conf = require("./fontello/config.json");
var mixins = conf.glyphs
  .filter(function (f) {return f.selected != false;})
  .map(function (f) {
    return '@mixin aicon-' + f.css + '} {@include icon-_base; content: "\\' + f.code.toString(16) + '";}' ;
  });
fs.writeFileSync('_mixins_fontello_fonts.scss', mixins.join('\n'));

node createMixins.js

実行すると、下記のように@mixinの列挙を得ることができます。8行程度のscriptでfsにしか依存していないscriptなので、gruntやgulp等のタスクランナーにも容易に組み込むことができます。

_mixins_fontello_fonts.scss

@mixin icon-plus {@include icon-_base; content: '\e823';}
@mixin icon-minus {@include icon-_base; content: '\e89d';}
@mixin icon-arrow-down {@include icon-_base; content: '\e89e';}
@mixin icon-arrow-forward {@include icon-_base; content: '\e89f';}
@mixin icon-arrow-left {@include icon-_base; content: '\e8a0';}
...

なお、それぞれのmixinが共通してincludeするicon-_baseは別途下記のように作成して@importしましょう.

@mixin icon-_base {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

おまけ: 一度に大量のfontをimportする

つい最近まで知らなかったのですが、glyphの選択画面ではDrag&Dropすると、範囲選択できるようになってました。一気にfontをimportする時などに地味に便利です。
(画面の端っこのほうだと、ドラッグの開始判定がされないので注意).

1. 本文とはあまり関係ないですが、Qiitaの文中では、<span class="fa fa-plus"/> のように書くと、font-awesomeのiconが使えたりします. ↩