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