Capacitorでアプリ用のアイコン画像を自動生成

公開日:

iOSやAndroidでアプリを開発していると様々なサイズのアイコン画像を作る必要があって結構大変です。

Capacitorではアイコン画像の自動生成機能があるので利用する。

ベースのアイコン画像を用意する

自動生成すると言ってもベースとなる画像は必要です。以下の5つの画像を用意します。

  • assets/icon-background.png
  • assets/icon-foreground.png
  • assets/icon-only.png
  • assets/splash-dark.png
  • assets/splash.png

アイコン画像のセットを生成する

ベース画像を用意できたら、サイズ違いの画像を生成していきます。

まず依存関係をインストールします。

npm install @capacitor/assets --save-dev

次に以下のコマンドでアイコン画像のセットを生成します。

npx capacitor-assets generate --android
npx capacitor-assets generate --ios

スプラッシュ画面とアイコン | Capacitorドキュメンテーション