これからはじめるGulp #22：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
前回のこれからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的WebサイトパブリッシュでAmazon S3への静的サイトパブリッシュを試しました。今回はSketch 3のデザインデータからgulp-iconfontとgulp-sketchプラグインを使ってアイコンフォント作成を自動化してみたいと思います。
gulp-iconfontについて
gulp-iconfontはSVGアイコンを使ってSVG/TTF/EOT/WOFF形式のフォントを作ることができます。
gulp-sketchについて
gulp-sketchはこれからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出しの回で紹介した通り、Sketchをコマンドラインから呼び出して画像を書き出すSketchToolを使ったプラグインです。
アイコン用のデザインファイルを用意する
Sketchで512 * 512のアートボードを用意して各アートボードに背景指定なしのアイコンを作りました。シンボルはすべて結合ツール結合しておきます。フォントを含む場合は必ずアウトライン化します。
今回は4つの矢印をアイコンフォント化してみます。
プラグインのインストール
必要なプラグインをインストールします。
gulp-iconfont
$ sudo npm install --save-dev gulp-iconfont gulp-iconfont@1.0.0 node_modules/gulp-iconfont ├── plexer@0.0.3 (readable-stream@1.0.33) ├── gulp-ttf2eot@1.0.0 (bufferstreams@0.0.2, ttf2eot@1.3.0, readable-stream@1.0.33) ├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.6, chalk@0.5.1, through2@0.6.3, lodash.template@2.4.1, dateformat@1.0.11, multipipe@0.1.2, lodash@2.4.1) ├── gulp-svg2ttf@1.0.0 (bufferstreams@0.0.2, readable-stream@1.0.33, svg2ttf@1.2.0) ├── gulp-svgicons2svgfont@1.0.0 (readable-stream@1.0.33, svgicons2svgfont@1.0.0) └── gulp-ttf2woff@1.0.0 (bufferstreams@0.0.2, readable-stream@1.0.33, ttf2woff@1.3.0)
gulp-sketch
$ vi gulpfile.js $ sudo npm install gulp-sketch --save-dev Password: gulp-sketch@0.0.6 node_modules/gulp-sketch ├── clean-sketch@1.0.1 ├── temporary@0.0.8 (package@1.0.1) ├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33) └── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, minimist@1.1.0, vinyl@0.4.6, chalk@0.5.1, multipipe@0.1.2, lodash@2.4.1, dateformat@1.0.11, lodash.template@2.4.1)
iconfontタスクを作る
gulp-sketchとgulp-iconfontプラグインを使ってタスクを作ります。gulp-iconfontプラグインのオプションはこちらに詳しく記載されています。
var gulp = require('gulp');
var sketch = require('gulp-sketch');
var iconfont = require('gulp-iconfont');
var paths = {
srcDir : 'assets/_design',
dstDir : 'assets/fonts'
}
gulp.task('iconfont', function(){
var fontName = 'arrow-font';
var srcGlob = paths.srcDir + '/icons.sketch';
var dstGlob = paths.dstDir + '/' + fontName;
var sketchOptions = {
export : 'artboards',
formats: 'svg'
}
var fontOptions = {
fontName : fontName
}
gulp.src( srcGlob )
.pipe(sketch( sketchOptions ))
.pipe(iconfont( fontOptions ))
.on('codepoints', function(codepoints, options) {
// CSS templating, e.g.
console.log(codepoints, options);
})
.pipe(gulp.dest( dstGlob ));
});
実行
実行するとSketchから書き出されたSVGはそのままgulp-iconfontプラグインでフォントとなります。
$ gulp iconfont
[17:19:25] Using gulpfile ~/Projects/Labs/iconfont.gulp/gulpfile.js
[17:19:25] Starting 'iconfont'...
[17:19:25] Finished 'iconfont' after 11 ms
[ { name: 'arrow-bottom', codepoint: 57345 },
{ name: 'arrow-left', codepoint: 57346 },
{ name: 'arrow-right', codepoint: 57347 },
{ name: 'arrow-top', codepoint: 57348 } ] { fontName: 'arrow-font',
ignoreExt: false,
log: [Function],
error: [Function],
fixedWidth: false,
descent: 0,
round: 10000000000000 }
[17:19:25] gulp-svgicons2svgfont: Font created
できあがったアイコンフォント
できあがったアイコンフォントは4つの形式で保存されます。
assets ├── _design │ └── icons.sketch └── fonts └── arrow-font ├── arrow-font.eot ├── arrow-font.svg ├── arrow-font.ttf └── arrow-font.woff
実際にHTMLで表示してみるとこのようになります。
アイコンを追加してgulpコマンドをたたくだけでアイコンフォントが作れるようになりました。便利すぎますね。明日は上記のサンプルのようにSymbols for Sketchを参考にしてアイコン一覧が載ったHTMLドキュメントを作ってみたいと思います。
参考サイト
この記事はこれからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化の転載です。
