gulp でサクッとアイコンフォントをSVGで

シェフの気まぐれサラダ〜ジェノバ風ソースで〜 みたいなタイトルになったけども。

もういいかげんというか、Font Awesomeがあまりにも便利すぎてアイコンフォントはどれもこれもかぶりに被っている！みたいな状況がどうなん？　と思えるようになったので、gulp+SVGで自サイト用のアイコンフォントをさくっとやろうかと。

実装するには

• svgファイル
• css吐き出すときのテンプレート

が別途必要かなと。

処理の流れとしては

1. svgからフォント作成
2. svgのファイル名からメインのCSSに組み込むフォント用のCSSを吐きだし

という流れで、1と２がちゃんと終わらないとSVGからフォントが出来ても使うのが難しいですね。

吐き出すCSSのテンプレートはfontawesome-style.cssを使わせてもらいました。

gulp fileは以下。

var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');

gulp.task('Iconfont', function(){
    gulp.src(['svg/icons/*.svg'])
        .pipe(iconfont({ fontName: 'myfont' }))
        .on('codepoints', function(codepoints, options) {
        gulp.src('templates/_myfont.scss')
            .pipe(consolidate('lodash', {
            glyphs: codepoints,
            fontName: 'myfont',
            fontPath: '../fonts/',
            className: 's'
        }))
            .pipe(gulp.dest('sass/'));
    })
        .pipe(gulp.dest('fonts/'));
});

パッケージ的にはこうかな。

  "devDependencies": {
    "gulp-consolidate": "^0.1.2",
    "gulp-iconfont": "^1.0.1",
    "gulp-iconfont-css": "0.0.9",
    "lodash": "^3.9.1"
  }

icomoonとか使えばいいじゃん？って思うかもですが、1個増えたりしたときいちいち面倒なので、自前環境があるとやはり捗りますね。

gulp-iconfont

とはいえ光の速さでサイト構築案件ならば迷わずFont Awesome使うとは思いますよ。はい。

文：シンタロヲフレッシュ

はてブ

pocket

twitter