はじめに

Ionicで簡単なアプリを作っていて、
アプリアイコンを設定してみたので設定方法を記録しておきます。

前提

  • Ionic CLIが使える状態
  • Ionicプロジェクトが作成済み



手順

1.Ionicにアカウントを作成する


にアクセスし、サインアップします。

なお、ターミナル上で ionic signup を実行しても同じURLに案内されます。

2.ターミナルで、ionic login を実行する

$ ionic login
[INFO] Log into your Ionic account!

       If you don't have one yet, create yours by running: ionic signup

? Email: (メールアドレス)
? Password: *********
[OK] You are logged in!

3. ionicプロジェクト配下の resources にicon.pngというファイル名でアプリアイコンを配置する

配置するアイコンは下記です。

  • 拡張子:png
  • サイズ:1024px*1024px

4. ターミナルで ionic-resをインストールする

$ npm i -g cordova-res
/usr/local/bin/cordova-res -> /usr/local/lib/node_modules/cordova-res/bin/cordova-res

> sharp@0.22.1 install /usr/local/lib/node_modules/cordova-res/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-darwin-x64.tar.gz
+ cordova-res@0.6.0
added 96 packages from 114 contributors in 40.639s



5. ionic cordova resources --icon を実行する

$ ionic cordova resources --icon
> cordova-res --type icon
[cordova-res] Generated 6 resources for android
[cordova-res] Generated 30 resources for ios
[cordova-res] Wrote to config.xml

後ろに iosandroid をつけると、指定したOSのみアイコンを作成できます。

6. resources配下のios/やandroid/にアイコンが作成される

できました!

7. ionic cordova build ios などでビルドする

通常と同じようにビルドすると、作成したアイコンを使用できます。

$ionic cordova build ios
$ionic cordova build android

終わりに

IonicCLIを利用して、iOS/Androidの両OSで必要な様々なサイズのアイコンを作成しました。
コマンドだけで作成可能で簡単なので、是非試してみてください。

スポンサーリンク