QuasarのIcon Genie CLIのインストール方法とよく使うオプションについて

Vue.js

QuasarのIcon Genie CLIを使うとアイコン（ファビコン）をデスクトップ、macandroid、iphone用に一括して作成することができます。

QuasarのIcon Genie CLIのインストール

インストールはグローバルに一度だけ実行します。 
$ yarn global add @quasar/icongenie 
# or 
$ npm install -g @quasar/icongenie
次回以降は不要です。 https://quasar.dev/icongenie/command-list yarnの場合は、上に記載の通りpathを通す必要があります。

アイコンを用意する

自作があればそれを利用します。 ない場合は、仮としてアイコンを用意しましょう。 フリーなら個人利用で制約は少しありますが、以下サイトが有用です。 https://www.iconfinder.com/ できる限り大きいサイズを選びます。 pngを選択してダウンロードします。 プロジェクトフォルダのルートに配置します。 そして、わかりやすい名前(app-icon.pngなど)に変えます。

Icon Genieのコマンドライン

コマンドラインでIcon Genieによってアイコンを作成します。 
icongenie generate [オプション] [ファイル名]
基本形は上の形で、その後ろにoptionsをつけていきます。

よく使うオプションについて

オプションは上で紹介した公式サイトのページで確認できます。 よく使うものを紹介します。 アイコン作成時は次のオプションが必須になります。 
--icon, -i
app-icon.pngというファイルなら、 
ex. icongenie generate -i app-icon.png
アイコンに背景をつけたいなら、 
--theme-color [色]
色の部分は4b6cb7のように#は不要です。 
--skip-trim
をいれるとアイコン周りをトリミングされません。 
icongenie generate -i app-icon.png --theme-color 4b6cb7 --skip-trim
というコマンドを打つと、5つのファイルが生成されます。 バージョンによって異なるようですが、publicのiconフォルダに格納されます。 
^[[A^[[ * Generated png:          public/icons/favicon-16x16.png (550.0B)
 * Generated png:          public/icons/favicon-32x32.png (1.0KB)
 * Generated png:          public/icons/favicon-128x128.png (3.7KB)
 * Generated png:          public/icons/favicon-96x96.png (2.9KB)
^R
^[[A * Generated ico:          public/favicon.ico (53.1KB)
生成時に、上のようにパスを教えてくれるのですぐにみつけられます。

package.jsonに設定する

同じコマンドをよく使う場合は、上のコマンドをpackage.jsonに設定しておくと便利です。 
"scripts": {
"icons": "icongenie generate -i app-icon.png --theme-color 4b6cb7 --skip-trim"
},
ただし、色（–theme-color 4b6cb7）の部分などはアプリによって変更が必要になることが多いので、毎回確認するようにしましょう。 上のように設定すると、 
npm run icons
で作成できるようになります。

Vue.jsQuasar

Posted by devsakaso