2015年7月24日金曜日

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

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

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


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


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


環境



手順


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化してくれている方がいたので、ありがたく頂戴する。


参考



補足


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