Android & iOS icon generator for React Native
You can run the icon generator with the npx command (available in Node.js 8.2.0 and later).
$ npx icon-set-creator create ./path/to/icon.png
For earlier Node versions, see π Installation section below.
Node Version Requirement
Icon set creator requires Node.js version 14.0 or above (v16+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows .
To install the new package globally, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g. n or nvm).
$ npm install -g icon-set-creator
# OR
$ yarn global add icon-set-creator
After installation, you will have access to the iconset binary in your command line. You can verify that it is properly installed by simply running iconset
, which should present you with a help message listing all available commands.
You can check you have the right version with this command:
$ iconset --version
If you want to install the icon-set-creator
locally, use one of the following commands:
$ npm install icon-set-creator -D
# OR
$ yarn add icon-set-creator -D
To create app icon you need:
example
folder for example icons.The easiest way to use icon-set-creator
is to specify the path to icon using iconset create
command in root of your project:
$ iconset create ./icon.png
If you have the package installed locally, you can do same with the package.json
script and then run it with npm run create-appicon
:
{
"scripts": {
"create-appicon": "iconset create ./icon.png"
}
}
It will generate icons of different sizes for Android and iOS.
There are two primary ways to configure icon-set-creator
:
package.json
file to specify configuration information to generate an application icon depending on your code style.To display all of the options for the given command, run iconset <command> --help
. For example:
$ iconset create --help
Usage: index create [options] [image-path]
Generate a new icon set for React Native project
Options:
-d, --disable-launcher-icon Disable changing the launcher icon for iOS and Android
-A, --android [icon-name] Generate icon set for android
-IPA, --image-path-android Image path for android
--flavor [flavor] Flavor name
-b, --adaptive-icon-background <background> The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png") which will be
used to fill out the background of the adaptive icon.
-f, --adaptive-icon-foreground <foreground> The image asset which will be used for the icon foreground of the adaptive icon
-I, --ios Generate icon set for ios
--group <group> Group for ios
-IPI, --image-path-ios Image path for ios
-h, --help display help for command
icon-set-creator
supports configuration files in several formats:
.iconsetrc.js
and export an object containing your configuration..iconsetrc.json
to define the configuration structure.package.json
- create an iconsetConfig
property in your package.json file and define your configuration there.If there are multiple configuration files in the same directory, icon-set-creator
will only use one. The priority order is as follows:
.iconsetrc.js
.iconsetrc.json
package.json
icon-set-creator
will automatically look for them in the directory path to be used to run the CLI.
Here's an example JavaScript configuration file that uses the adaptiveIconBackground
/adaptiveIconForeground
options to support adaptive icons:
// .iconsetrc.js
module.exports = {
imagePath: './assets/icon.png',
adaptiveIconBackground: './assets/icon-background.png',
adaptiveIconForeground: './assets/icon-foreground.png',
};
imagePath
β The location of the icon image file which you want to use as the app launcher icon. e.g. ./assets/icon.png
disableLauncherIcon
- Generate only icons without changing manifest filesandroid
/ios
(optional): true
β Override the default existing React-Native launcher icon for the platform specified, false
β ignore making launcher icons for this platform, icon_name
β this will generate a new launcher icons for the platform with the name you specify, without removing the old default existing React-Native launcher icon.imagePathAndroid
β The location of the icon image file specific for Android platform (optional β if not defined then the imagePath
is used)imagePathIos
β The location of the icon image file specific for iOS platform (optional β if not defined then the imagePath
is used)The next two attributes are only used when generating Android launcher icon:
adaptiveIconBackground
β The color (E.g. "#ffffff"
) or image asset (E.g. "assets/images/dark-background.png"
) which will be used to fill out the background of the adaptive iconadaptiveIconForeground
β The image asset which will be used for the icon foreground of the adaptive iconβ¨ You are amazing!