Easily resize your icons and splashscreens of your Ionic project.
The script replaces the existing ionic resources command which doesn't do an excellent job at the moment.
Supported OS:
- Mac OSX, (
sipsshould be installed )
- The command does not crop the files.
- Must run from the Ionic's root directory ( same as
ionic resourcescommand ). - The
icon.pngin size 1024x1024 should exists underresources/icon.png.
- Splashscreen template, minimum size of
2208x2208. - Icon: no template, just make it with minimum size of
192x192.
We need to prepare our environment before using ionic-resources, same as written in the official Ionic automation tutorial
Execute once the Ionic resources command, this will create all the directories necessary, including adding the XML in config.xml.
Note: if you're forcing a "landscape/portrait" orientation in the config.xml, then ionic resources will generate only those images and add row for only the orientation requested.
My suggestion is to hide the orientation preference and after you're satisfied with the result - add it back.
Create only splashscreens for the Android platform
ionic-resources --splash --platform android
Create only icons for both Android & iOS
ionic-resources --icon
Create both splashscreen & icons for the Android platform
ionic-resources --platform android
Create both icons & splashscreen for both Android & iOS
ionic-resources
ionic-resources --icon
-------------------------------------------------------
Ionic resources generator
Requested platform(s): Android & iOS
Requested type(s): Icon
-------------------------------------------------------
Icons for Android
------------------------
--> Generating size: 48x48 ... DONE (resources/android/icon/drawable-mdpi-icon.png)
--> Generating size: 144x144 ... DONE (resources/android/icon/drawable-xxhdpi-icon.png)
--> Generating size: 512x512 ... DONE (resources/android/icon/drawable-xxxxhdpi-icon.png)
--> Generating size: 72x72 ... DONE (resources/android/icon/drawable-hdpi-icon.png)
--> Generating size: 36x36 ... DONE (resources/android/icon/drawable-ldpi-icon.png)
--> Generating size: 192x192 ... DONE (resources/android/icon/drawable-xxxhdpi-icon.png)
--> Generating size: 96x96 ... DONE (resources/android/icon/drawable-xhdpi-icon.png)
Icons for Ios
--------------------
--> Generating size: 29x29 ... DONE (resources/ios/icon/icon-small.png)
--> Generating size: 58x58 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 87x87 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 80x80 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 114x114 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 120x120 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 180x180 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 144x144 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 76x76 ... DONE (resources/ios/icon/icon-76.png)
--> Generating size: 57x57 ... DONE (resources/ios/icon/icon.png)
--> Generating size: 72x72 ... DONE (resources/ios/icon/icon-72.png)
--> Generating size: 100x100 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 40x40 ... DONE (resources/ios/icon/icon-40.png)
--> Generating size: 60x60 ... DONE (resources/ios/icon/icon-60.png)
--> Generating size: 152x152 ... DONE (resources/ios/icon/[email protected])
--> Generating size: 50x50 ... DONE (resources/ios/icon/icon-50.png)
After running the ionic-resources command, files will be located in:
- Android
- Splashscreens:
resources/android/splash - Icons:
resources/android/icon
- Splashscreens:
- iOS:
- Splashscreens:
resources/ios/splash - Icons:
resources/ios/icon
- Splashscreens:
Only after you ionic (build|emulate|run) the project, those files will be moved to the correct place for each platform.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent