image-res-generator

Introduction

image-res-generator is an automatic icon and splash screen resizing tool designed for Angular, Ionic, Capacitor, Cordova, PhoneGap apps, PWAs, and general use. It resizes and copies your icon.png and splash.png files to the platform-specific directories.

Installation

To install the image-res-generator globally, run:

npm install -g image-res-generator

This will make the irgen command available globally on your system.

Usage

Required Files

Place your icon and splash files in the ‘resources’ folder under the root of your project. Ensure they are at least 1024x1024 pixels for icons and 2732x2732 pixels for splash images.

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

Update: You can now use SVG vector images for both icon and splash files 🎉.

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

When creating a base splash image, ensure that the artwork fits within 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 Usage

To generate resized images, use:

$ image-res-generator

or

$ irgen

Note: 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

Best Practices

Automate with NPM Scripts

Add a script to your package.json to automate the image generation process with specific options. This saves time and avoids repetitive command typing.

Example:

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

Now, you can run:

npm run resgen

Supported Platforms

• iOS
  • Icons
  • Splash screens
• Android
  • Icons
  • Splash screens
• Windows
  • Icons
  • Splash screens
• Blackberry 10
  • Icons
• PWAs
  • Icons

Roadmap

• Copy assets to Android/iOS Capacitor folders.
• Add options for crop resizing strategy.
• Update image configurations for all platforms.
• Add support for Capacitor.

Contributing

Thank you for your interest in contributing! Please read our contributing guidelines to get started.

Credits

This open-source project is made possible by the 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 licensed under the GPLv3. See the LICENSE file for details.