ソーシャルボタンのアイコンをSVGファイル化する

ソーシャル系のガジェットやスクリプトは、多数のリソースを読み込むなど、ユーザーの体感スピードを劣化される。デザインも統一感が、なかなか出せない。

よって、自作しよう！となった時に、ソーシャルボタンのSVGファイルが欲しくなって調査した忘備録。

1. Twitter、Facebook、Google+ のSVGファイル作成

これら3つは、font-awesomeの中にアイコンがあるので、「encharm/Font-Awesome-SVG-PNG」を使う。

環境

• Mac OS X Yosemite 10.10.4
• npm 2.5.1
• Font-Awesome-SVG-PNG 1.1.2

手順

Font-Awesome-SVG-PNG のインストール

$ npm install -g font-awesome-svg-png

インストール確認

$ npm ls --depth=0 -g

インストールしたディレクトリ下の、bower_components/font-awesome-svg-png/には、black/ と white/ のディレクトリがあるので、黒や白のSGVファイルが欲しい場合は、そこからゲットすればよい。

赤など、黒白以外のカラーのSVGファイルが欲しい場合は、コマンドで書き出せる。

SVGファイルを書き出し

オプションの例

• --dest: 出力パス
• --color: 赤
• --sizes: 80px
• --icons: Twitter, Facebook, Google+
• --no-png: SVGオンリー

$ font-awesome-svg-png --dest font-awesome --color red --sizes 80 --icons twitter,facebook,google-plus --no-png

※--iconsの指定では、カンマの後ろにスペースを挟まない

2. はてブ、LINE、Pocket のSVGファイル作成

これら3つは、font-awesomeの中にアイコンが無い。既にアイコンのパスをトレースしてSVG化してくれている方がいたので、ありがたく頂戴する。

参考

• ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい！ | ドウラク

補足

これ、font-awesomeにあったっけ？という時は、font-awesomeのサイトで検索するとよい。