image-res-generator

Introduction

Automatic icon and splash screen resizing tool. Helpful for quickly generating image assets for Angular/Ionic/Capacitor/Cordova/PhoneGap apps, PWAs and general use.

It automatically resizes and copies your icon.png and splash.png files to the platform dedicated directories.

---

Usage

Required files

Add your icon and splash files to the 'resources' folder under the root of your project. Make sure they are at least (1024px x 1024px) for icons and (2732px x 2732px) for splash images.

resources/
├── icon.png
└── splash.png

Update : You could now use SVG vector images for the same 🎉.

resources/
├── icon.svg
└── splash.svg

While creating a base splash image, make sure that the splash screen's artwork roughly fits/covers a square (1200x1200) at the center of the image (2732x2732).

You can use this template provided by the Ionic team for easier splash creation.

Command line

    $ image-res-generator

or

    $ irgen

ATTENTION: while preserving source files, it overwrites previous output if any.

Options

-V, --version               output the version number
-i, --icon [optional]       optional icon file path
                            (default: ./resources/icon.png)
-s, --splash [optional]     optional splash file path
                            (default: ./resources/splash.png)
-p, --platforms [optional]  optional platform token comma separated list
                            available tokens: android, ios, windows, blackberry10, pwa
                            (default: all platforms processed)
-o, --outputdir [optional]  optional output directory
                            (default: ./resources/)
-I, --makeicon [optional]   option to process icon files only
-S, --makesplash [optional] option to process splash files only
-c, --crop[optional]        option to crop images, instead of the default 'resize' strategy. 
-h, --help                  output usage information
-d, --debug                 output debugging information

---

Do yourself a favor

Add to your package.json a script definition to match your file generation needs. This way, you won't have to repeat the whole command along with the options.

An example

{
  ...
  "scripts": {
    ...
      "resgen": "irgen -p android,ios"
  }
}

All you have to do then is type :

npm run resgen

NPM will cope with typing the whole command line for you.

---

Platforms

Supported platforms:

• iOS
  • icons
  • splash screens
• Android
  • icons
  • splash screens
• Windows
  • icons
  • splash screens
• Blackberry 10
  • icons
• PWAs
  • icons

---

Upcoming tasks

• Fix installation as an npm package.
• Copy assets to android/ios capacitor folders.
• Add options for Crop resizing strategy
• Update image configurations for all platforms
• Add support for capacitor

Contributing

Thanks for your interest in contributing! Read up on our guidelines to start contributing.

---

Credits

This open-source project is made possible with the help and support of the amazing open-source community. Special thanks to:

• All contributors in this project ✨💚.
• @olivab for creating and maintaining the original project cordova-res-generator.
• Contributors to cordova-res-generator.

---

License

This project is made available under the terms of the GPLv3. See the LICENSE file for the full text of the license.