icomoonに頼らずにiconフォントを作成する（gulp-iconfont）

#はじめに
webサービスでアイコンフォントを使おうとして、自分の好きなアイコンだけ選んで使え、自作のアイコンを登録できるicomoonを使用していた。
しかし、無料版は設定をCookieに保存するので下記の点で困っていた。

• キャッシュクリアしたら再作成する必要がある
• 他人と設定を共有できない
• 課金額に見合うメリットが見出せない

そんなわけで、アイコンをGulpで生成きないかなと思ったらgulp-iconfontというパッケージがあったので導入時に詰まったところを備忘録として残しておく。nodeとgulpの使い方は省略します。

アウトプットファイル

• アイコンフォント一式
• sassファイル
  • ここからさらにsassコンパイルして１つのcssを出力しているため
• ドキュメントファイル
  • html（iconsTemplate.html）
  • css（iconsTemplate.css）
  • 使用フォント一覧をブラウザで見えるようにしておくと便利

準備

• nodeのインストール
• gulpとパッケージのインストール
  • gulp
  • gulp-rename
  • gulp-iconfont
  • gulp-consolidate
  • lodash
• iconフォント化したいSVG
  • 今回はMaterial icons( https://material.io/icons/ )を使用する
  • 1000px以上にリサイズして使用すること
• テンプレートファイル
  • https://github.com/backflip/gulp-iconfont-css を変更して使用する

タスクの設定

gulpfile.coffee

gulp         = require 'gulp'
rename       = require 'gulp-rename'
iconfont     = require 'gulp-iconfont'
consolidate  = require 'gulp-consolidate'

fontOutputDirectory = "fonts/"
runTimestamp = Math.round Date.now() / 1000
fontName = 'sampleicons'

gulp.task 'iconfont', () ->
  return gulp.src [fontOutputDirectory + 'svg/*.svg']
    .pipe iconfont
      fontName: fontName
      timestamp: runTimestamp
      formats: ['ttf','eot','woff','svg']
    .on 'glyphs', (glyphs, options) ->
      cssFileName = 'iconsSample'
      scssFileName = '_icons'
      htmlFileName = 'iconsSample'
      engine = 'lodash'
      consolidateOptions =
        glyphs: glyphs
        fontName: fontName
        fontPath: './'
        className: 'icon'
      #sass
      gulp.src fontOutputDirectory + 'iconsTemplate.scss'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: scssFileName
        .pipe gulp.dest 'sass/font/'
      #css
      gulp.src fontOutputDirectory + 'iconsTemplate.css'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: cssFileName
        .pipe gulp.dest fontOutputDirectory
      # #html
      consolidateOptions.cssFileName = cssFileName
      gulp.src fontOutputDirectory + 'iconsTemplate.html'
        .pipe consolidate engine, consolidateOptions
        .pipe rename basename: htmlFileName
        .pipe gulp.dest fontOutputDirectory

    .pipe gulp.dest(fontOutputDirectory)

#つまりどころ
##Cannot read property 'toString' of undefinedとエラーが出る
glyph.codepoint.toString(16).toUpperCase()
を
glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase()
に変更する

使用するSVG画像

大きさを1000px以上を使用しないと生成時にアイコンが崩れてしまう

参考URL

http://qiita.com/MAL09/items/1b383fbb62e241ed6e1b
http://sakamock.hatenablog.com/entry/2016/11/25/173403