Skip to content

Instantly share code, notes, and snippets.

@dalezak

dalezak/README.md

Last active September 11, 2023 09:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dalezak/a6b1de39091f4ace220695d72717ac71 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dalezak/a6b1de39091f4ace220695d72717ac71 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Capacitor Resources Generator
Raw
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
Raw
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"
}
Raw
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);
@Srinivas-newAge
Copy link

Srinivas-newAge commented Jan 20, 2022

I dont have scripts/resources.js in my project

@Diex
Copy link

Diex commented Jan 25, 2022

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

@Diex
Copy link

Diex commented Jan 25, 2022 •
edited
Loading

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

@Srinivas-newAge
Copy link

Srinivas-newAge commented Jan 27, 2022 •
edited
Loading

@Diex Thanks in advance ...waiting for solution

@gbrits
Copy link

gbrits commented Feb 9, 2022

@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

@theGuiMan
Copy link

theGuiMan commented Apr 11, 2022

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

@willyguevara
Copy link

willyguevara commented Oct 28, 2022 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment