ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは使いどころが多そう!

Font AwesomeはWeb Fontをアイコンとして使えるので便利なライブラリです。便利さ故に他のケースでも使いたいと思うのではないでしょうか。また、一つのアイコンだけを使うためにWeb Font全体を読み込むのは大変です。

そこで使ってみたいのがFont-Awesome-SVG-PNGです。Font Awesomeのデータを読み込んで指定方式でSVG/画像に変換してくれるソフトウェアです。

作成例。赤いアイコン画像をまとめて生成できます。
作成例。赤いアイコン画像をまとめて生成できます。

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

インストールはnpmコマンドで行います。

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

Font-Awesome-SVG-PNGとは別でlibrsvgが必要です。Windowsの場合はosspack32を使えます。

Font-Awesome-SVG-PNGの使い方

font-awesome-svg-png というコマンドが追加されます。例えば赤いアイコンをサイズ128/256pxで出力する場合は次のようになります。

$ font-awesome-svg-png --color red --sizes 128,256

ヘルプは次のようになります。

$ font-awesome-svg-png --help
Usage: /Users/nakatsugawa/.nodebrew/current/bin/font-awesome-svg-png -color white

Options:
  --sizes  Provide comma separated sizes to generate  [default: "16,22,24,32,48,64,128,256"]
  --color                                             [required]

Missing required arguments: color

色とサイズ指定くらいということですね。

サイズは自由に指定できます。大きな画像でも綺麗です。
サイズは自由に指定できます。大きな画像でも綺麗です。

SVGも出力されます。
SVGも出力されます。

画像やSVGで出力してしまえば、プレゼンテーションの中で使ったり、別なファイルでも利用できて便利そうです。多彩なアイコンがあるだけに使える場面が多そうです。

Font-Awesome-SVG-PNGはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

CodeCharmLtd/Font-Awesome-SVG-PNG

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2