sebinbenjamin/image-res-generator

View on GitHub
README.md

Summary

Maintainability
Test Coverage
# image-res-generator
[![CircleCI build status](https://img.shields.io/circleci/build/github/sebinbenjamin/image-res-generator.svg)](https://circleci.com/gh/sebinbenjamin/image-res-generator)
[![Codeclimate Issues](https://img.shields.io/codeclimate/issues/sebinbenjamin/image-res-generator.svg)](https://codeclimate.com/github/sebinbenjamin/image-res-generator/issues)
[![Codeclimate Maintainability](https://img.shields.io/codeclimate/maintainability-percentage/sebinbenjamin/image-res-generator.svg)](https://codeclimate.com/github/sebinbenjamin/image-res-generator/maintainability)
[![Depfu](https://badges.depfu.com/badges/e26d90ff99e9d1681c0e0029b003cb9f/overview.svg)](https://depfu.com/github/sebinbenjamin/image-res-generator?project_id=8520)
[![Gitter Chay](https://img.shields.io/gitter/room/sebinbenjamin/image-res-generator.svg?color=blue)](https://gitter.im/image-res-generator/community)
[![License: GPL v3](https://img.shields.io/badge/License-GPL%20v3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)

## 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.

---
<!-- ## Installation

    $ npm install image-res-generator -g
--- -->

## 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).

<img src="https://user-images.githubusercontent.com/4099066/82296073-bd052880-9a04-11ea-9ee7-199b6dc1e826.jpg" width="75%">

You can use this [template](https://code.ionicframework.com/resources/splash.psd) provided by the Ionic team for easier splash creation.


### Command line

```bash
    $ image-res-generator
```
or

```bash
    $ 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](https://github.com/sebinbenjamin/image-res-generator/blob/master/CONTRIBUTING.md) 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][1] for creating and maintaining the original project [cordova-res-generator][2].
* Contributors to [cordova-res-generator][2].

[1]: https://github.com/olivab
[2]: https://github.com/olivab/cordova-res-generator

---

## License

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

[license]: https://github.com/sebinbenjamin/image-res-generator/blob/master/LICENSE