こんにちは。EXP ひのたんです。
最近アイコンフォントを作って GitHub と npm で公開したのでその紹介記事です。

feathericon

• Web サイト: https://feathericon.com/
• GitHub: https://github.com/featherplain/feathericon
• npm: https://www.npmjs.com/package/feathericon

名前は私の Web 上のハンドルネームである「featherplain (フェザープレイン) 」と icon を合わせた 「feathericon (フェザリコン) 」です。

アイコンフォントと言えば Font Awesome や GitHub の Octicons のアイコンフォントの巨人がすでに存在します。Web フォント化していなくとも、「vector free icons」 とかでググれば海外のリソースがたくさんヒットします。なので今更目新しくもなんともないわけですが、「どうやってるのかなあ、自分も作ってみたいな」とある日ふと思い立って作ってみました。

ベクターでもコードでもどちらでも使用可能

Font Awesome のように、

<i class="fe fe-heart"></i>

と書けばブラウザで表示されます。実際の表示は Web サイトを見てみてください。スタイリングも CSS でできることであれば何でもできます。

feathericons/src/svg/ の中に SVG ファイルが全て入っているのでこちらを使っていただいても構いませんし、Mac で Sketch 使いの方であれば feathericon/src/feathericon.sketch をダウンロードして直接 Sketch ファイルを編集してもらってもいいです。

一部を紹介

※ デザインは今後変わる可能性があります。

制作

デバイス

テキストエディット

その他

Sketch でアイコン制作

アイコン制作には Sketch を使いました。 Illustrator よりも Sketch の方が使い慣れていることと、GitHub 製の Octicons のソースを見てみたら Sketch で作っていることが分かったのでいろいろ参考にしやすいなーと思ったこと、さらに gulp-sketch ( gulp から SketchTool を使えるようにする) で SVG の書き出しを自動化できることが理由です。自動化できるのはかなりありがたい…

ターゲットサイズを 16px にしたので、図のように 16x16 を基本としてアートボードに各アイコンを配置しています。

SVG の書き出しとフォント生成

コマンド一発でできるように

$ npm run webfont

このコマンドで、

• Sketch -> SVG ファイル書き出し
• 書き出した SVG からフォント生成
• CSS の minify
• SVG スプライト画像生成(インライン SVG 用)

を自動でできるようにしました。コードの解説をしだすと長くなってしまうので(というよりも、説明がめんどくさい…w)興味がある方は GItHub のリポジトリを見てください。使った gulp のプラグインなどのツールのリンクを下記に記載しておきます。

使用したツール

• gulp-sketch: Sketch から画像を書き出し。レイヤーごと、アートボードごとに書き出しできる
• gulp-clean-css: CSS の minify
• gulp-rename: ファイル名の変更
• gulp-svg-sprite: SVG スプライト画像生成
• run-sequence: タスクの直列/並列処理を制御する
• FontCustom : SVG ファイルからフォント、CSS や Sass(SCSS) ファイル生成

FontCustom

アイコンフォント制作を始めるまでは知らなかったのですが、Sketch から書き出した SVG からフォント化するには FontCustom を使えば簡単にできます。

公式の Installation に記載されているとおり、Homebrew で fontforge と eot-utils をインストールした後、gem で FontCustom 本体をインストールします。なお、Windows は未対応です。くわしい使い方は公式の README を読んでください。

ちなみに、類似のツールに gulp-iconfont があり当初は gulp だけで完結させたかったのでこちらを採用していましたが、SVG からフォント化する際の挙動が不安定で、Windows や iOS で正しく表示ができないものが多数あったので使用を途中で断念した経緯があります。

CI

Travis CI を使って npm に自動リリースをしています。ちなみにテストと呼べるようなテストはまだしていません。。。

deploy:
  provider: npm
  email: "YOUR NPM EMAIL"
  api_key: "YOUR NPM API KEY"
  skip_cleanup: true
  on:
    branch: master
    repo: "YOUR TRAVIS REPO SLUG"

.travis.yml にこう記述しておけば Travis が勝手にリリースしてくれます。詳しくは公式の npm Releasing を読んでください。

自分で全部やってみた感想

Sketch でのベジェ曲線やパスの扱いが苦手で、自分の思うようになかなかアイコンが作れず苦戦したことも多かったのですが、苦に感じたことはなく、作っていて楽しかったです。自分でやりたくて初めたことですしね。100個以上アイコンを作ってたら苦手意識もどこかに飛んでいきました。

ただし、feathericon の場合 Sketch でアイコンを作り終えたら「やったーハイ終わりー!」ではなく Web フォント化してブラウザで表示できるようにするのがゴールです。GitHub の Octicons のソースを漁ったり、ググったりして自分が「こうしたい！」と思ったことをどうやれば実現できるのかを考えるのも面白かったです。点と点をつなげてどんどん線にしていく感じですね。まあ実際にやっていることは他の人が作った便利なものを組み合わせて gulpfile や shell スクリプトにまとめているだけで、決して自分でプログラムを書いたとかではないわけですが。逆に言うと、メインはあくまでアイコンを作ることなので自分で gulp のタスクを書く以上のことが発生したらそれはそれで大変でした。

そんなわけで v0.3.0 のまだまだ発展途上のプロジェクトですが、今後もアイコンの数をどんどん増やしていく予定です。アイコンのデザインもちまちま修正していきます。もし「いいね！」と思っていただけたら GitHub のリポジトリにスターをつけてもらえると制作の励みになるので嬉しいです！