素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【簡単マルチアイコン作成】SVGやPNGから様々なアイコンファイルをまとめて自動生成してくれる「icon-gen」をnpmでインストールして幸せになろう【使い方】

投稿日:

スポンサーリンク

336×280




アイコン画像を作りたい

レトロなやり方はやめたい

Webサイト制作をしていると、ほぼ100%の確率faviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。

イラストレーターで作ったり、無料のWebツールで作成したりと手段は様々ありますが、画質が荒くなったりサイズごとの画像を用意しないといけなかったり課題がたくさんです。

Electronでもアイコン画像が必要

最近のデスクトップアプリの開発でよく使われているElectronでも、アプリアイコンが必要となっています。

Electron自体はマルチプラットフォームのアプリなのでWindowsでもMacでも動くのですが、それぞれ別のアイコンファイルを作成する必要があり、これもそれぞれ作らないといけないのが手間ですね。orz

npmのicon-genを使えば一発でまとめて作成

そんなあなたにオススメなのが、icon-genです!

akabekobeko/npm-icon-gen

こちらを使えば、コマンドベース単一の画像ファイルからサクッと様々な形式のアイコン画像をまとめて作ることが出来ます。

マルチアイコンにも対応

さらに、このicon-genの強みとして、マルチアイコンの作成にも対応している点が挙げられます。

一つのSVGからコマンド一発でWindows/mac/ホームページのそれぞれのマルチアイコンを生成出来るのは最強すぎませんかね?!

手順

インストール

まずは今回使うicon-gen以下のコマンドでインストールしましょう。

以下のように依存パッケージ含めインストールが完了します。

次に、以下のコマンドでpackage.jsonを作成しましょう。
対話は基本空欄でいいのでエンター連打でOKです。

すると、以下のようにpackage.jsonが生成されます。

package.jsonの中身はこんな感じ。

スクリプトの準備

では、実際にicon-genを使うスクリプトを用意しましょう。
今回は同階層にあるblogenist_icon.svgと言うsvg画像から生成してみます。

まずは、script.jsと言うファイルを用意して以下の内容をコーディングしてください。
${XXX}は適時変えてください

出力先ディレクトリの作成

ここで指定したディレクトリが存在しない場合自動生成されないため、エラーが発生するので存在するディレクトリを指定する必要があります。

package.jsonに起動スクリプトの追加

次に、package.json起動スクリプトを定義します。

実行

では、実際に以下のコマンドで実行をしてみましょう。

すると、以下のようなログが出始めて処理が開始されます。

確認

iconsディレクトリの中を見ると一通りのアイコンファイルが生成されています。

マルチアイコンにもしっかりなっていますね♪



終わりに

以上のように簡単にSVG画像から各種アイコン画像を生成することが出来ました。

もちろん、SVGだけでなくPNGからの生成も出来ますし、様々なオプションが備わっているので是非試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , ,

blogenist

Author: blogenist