Ionic Capacitor Resources Generator

README.md

1. Run npm install cordova-res --save-dev
2. Create 1024x1024px icon at resources/icon.png
3. Create 2732x2732px splash at resources/splash.png
4. Add "resources": "cordova-res ios && cordova-res android && node scripts/resources.js" to scripts in package.json
5. Copy resources.js file to scripts/resources.js
6. Run sudo chmod -R 777 scripts/resources.js
7. Run npm run resources

package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "resources": "cordova-res ios && cordova-res android && node scripts/resources.js"
}

resources.js

const fs = require('fs');

const SOURCE_IOS_ICON = 'resources/ios/icon/';
const SOURCE_IOS_SPLASH = 'resources/ios/splash/';

const TARGET_IOS_ICON = 'ios/App/App/Assets.xcassets/AppIcon.appiconset/';
const TARGET_IOS_SPLASH = 'ios/App/App/Assets.xcassets/Splash.imageset/';

const SOURCE_ANDROID_ICON = 'resources/android/icon/';
const SOURCE_ANDROID_SPLASH = 'resources/android/splash/';

const TARGET_ANDROID_ICON = 'android/app/src/main/res/';
const TARGET_ANDROID_SPLASH = 'android/app/src/main/res/';

const IOS_ICONS = [
  { source: 'icon-20.png', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: 'icon-29.png', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: 'icon-40.png', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: 'icon-76.png', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: '[email protected]', target: '[email protected]' },
  { source: 'icon-1024.png', target: '[email protected]' }
];
const IOS_SPLASHES = [
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732.png' },
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732-1.png' },
  { source: 'Default-Portrait@~ipadpro.png', target: 'splash-2732x2732-2.png' }
];

const ANDROID_ICONS = [
  { source: 'drawable-ldpi-icon.png', target: 'drawable-hdpi-icon.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_round.png' },
  { source: 'drawable-mdpi-icon.png', target: 'mipmap-mdpi/ic_launcher_foreground.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_round.png' },
  { source: 'drawable-hdpi-icon.png', target: 'mipmap-hdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_round.png' },
  { source: 'drawable-xhdpi-icon.png', target: 'mipmap-xhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxhdpi-icon.png', target: 'mipmap-xxhdpi/ic_launcher_foreground.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_round.png' },
  { source: 'drawable-xxxhdpi-icon.png', target: 'mipmap-xxxhdpi/ic_launcher_foreground.png' }
];
const ANDROID_SPLASHES = [
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable/splash.png' }, 
  { source: 'drawable-land-mdpi-screen.png', target: 'drawable-land-mdpi/splash.png' },
  { source: 'drawable-land-hdpi-screen.png', target: 'drawable-land-hdpi/splash.png' },
  { source: 'drawable-land-xhdpi-screen.png', target: 'drawable-land-xhdpi/splash.png' },
  { source: 'drawable-land-xxhdpi-screen.png', target: 'drawable-land-xxhdpi/splash.png' },
  { source: 'drawable-land-xxxhdpi-screen.png', target: 'drawable-land-xxxhdpi/splash.png' },
  { source: 'drawable-port-mdpi-screen.png', target: 'drawable-port-mdpi/splash.png' },
  { source: 'drawable-port-hdpi-screen.png', target: 'drawable-port-hdpi/splash.png' },
  { source: 'drawable-port-xhdpi-screen.png', target: 'drawable-port-xhdpi/splash.png' },
  { source: 'drawable-port-xxhdpi-screen.png', target: 'drawable-port-xxhdpi/splash.png' },
  { source: 'drawable-port-xxxhdpi-screen.png', target: 'drawable-port-xxxhdpi/splash.png' }
];

function copyImages(sourcePath, targetPath, images) {
  for (const icon of images) {
    let source = sourcePath + icon.source;
    let target = targetPath + icon.target;
    fs.copyFile(source, target, err => {
      if (err) throw err;
      console.log(`${source} >> ${target}`);
    });
  }
}

copyImages(SOURCE_IOS_ICON, TARGET_IOS_ICON, IOS_ICONS);
copyImages(SOURCE_IOS_SPLASH, TARGET_IOS_SPLASH, IOS_SPLASHES);

copyImages(SOURCE_ANDROID_ICON, TARGET_ANDROID_ICON, ANDROID_ICONS);
copyImages(SOURCE_ANDROID_SPLASH, TARGET_ANDROID_SPLASH, ANDROID_SPLASHES);

Hero

@Gabriel1590 cordova-res now supports Capacitor directly. https://github.com/ionic-team/cordova-res#capacitor

Thanks!

@Gabriel1590 cordova-res now supports Capacitor directly. https://github.com/ionic-team/cordova-res#capacitor

Thanks!

Thankyou @dalezak, its awesome.

and for @tnovau, but cordova-res cannot generate foreground-icons
as mentioned here
ionic-team/capacitor-assets#137 (comment)

Thanks!

@dalezak @rrlevy
That works pretty well. Nice work. With the splash images generated using cordova-res I noticed these are just cropped not resized.
This makes for some pretty awful looking splash screens at the lower resolutions.
Is there any way to to resize the image like image gorilla does?
https://apetools.webprofusion.com/#/tools/imagegorilla

same here, for me cordova-res is just cropped the asset files not generated successfully :(

@dalezak @rrlevy
That works pretty well. Nice work. With the splash images generated using cordova-res I noticed these are just cropped not resized.
This makes for some pretty awful looking splash screens at the lower resolutions.

I was under the impression that cropping is the right approach. That's why the recommendations are to center your design. There is a PSD template in the ionic documentation that has a very simple grid that demonstrates the sweet spot of the splash screen

Super!!! 💯 !

What a great solution. Thanks @dalezak.

Thanks, awesome. Still super useful

I dont have scripts/resources.js in my project

@Srinivas-newAge https://gist.github.com/dalezak/a6b1de39091f4ace220695d72717ac71#file-resources-js

I think it's outdated because of this:

Generated 18 resources for Android
WARN: Error occurred while copying resources/android/icon/mdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/mdpi-background.png
WARN: Error occurred while copying resources/android/icon/hdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/hdpi-background.png
WARN: Error occurred while copying resources/android/icon/xhdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xhdpi-background.png
WARN: Error occurred while copying resources/android/icon/xxhdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xxhdpi-background.png
WARN: Error occurred while copying resources/android/icon/xxxhdpi-foreground.png
WARN: Error occurred while copying resources/android/icon/xxxhdpi-background.png
Copied 31 resource items to Android

icon fails on android.
I'll check cordova-res for a solution.
any thought will be welcomed.

thx

@Diex Thanks in advance ...waiting for solution

@Srinivas-newAge @Diex you can use this alternative solution:

npm install capacitor-resources -g

Add the icon & splash to the resources folder as standard, then run the following command in your project's root

capacitor-resources

i get this warning WARN: No config.xml file in directory. Skipping config.

i get this warning WARN: No config.xml file in directory. Skipping config.

x2

i get it to work just commenting line 83 and 84 of fileresources.js

// copyImages(SOURCE_IOS_ICON, TARGET_IOS_ICON, IOS_ICONS);
// copyImages(SOURCE_IOS_SPLASH, TARGET_IOS_SPLASH, IOS_SPLASHES);

Because i was working only for android, not ios.