This content originally appeared on DEV Community and was authored by ?#@*&%!
To create app icon you need:
- PNG icon for IOS and Android (I highly recommend using an icon with a size of at least 1024x1024 pixels)
- You can also create Adaptive Icon for Android, which can display a variety of shapes across different device models (Learn More). To create it you need a foreground image and a background color or image. There is also a good article on how to design such icons.
In this guide we’re going to use the following assets, which can be found in GitHub repository:
First you need to install ⭐ ️icon-set-creator:
$ 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.
Now you can create config file for icon-set-creator. Create iconset.config.js file in root of your app (where package.json is located) and set options for our assets:
-
imagePath— The location of the icon image file which you want to use as the app launcher icon. e.g../assets/icon.png -
android/ios(optional):true— Override the default existing Flutter 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 Flutter launcher icon. -
imagePathAndroid— The location of the icon image file specific for Android platform (optional — if not defined then theimagePathis used) -
imagePathIos— The location of the icon image file specific for iOS platform (optional — if not defined then theimagePathis 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 icon -
adaptiveIconForeground— The image asset which will be used for the icon foreground of the adaptive icon
In our example we will use one icon for both platforms and also an adaptive icon for android. This is how the our config file will look:
/*iconset.config.js*/
module.exports = {
imagePath: './assets/app-icon/icon.png',
adaptiveIconBackground: './assets/app-icon/background.png',
adaptiveIconForeground: './assets/app-icon/foreground.png'
};
? Enter the command below and you’re done!
$ iconset create
If you want, you can add the package in the dev dependencies and the scripts to the package.json:
{
"scripts": {
"create-appicon": "iconset create"
},
"devDependencies": {
"icon-set-creator": "latest"
}
}
Next time you can just enter the npm run create-appicon command.
? Thanks for reading! If you like what I do, you can follow me on GitHub
This content originally appeared on DEV Community and was authored by ?#@*&%!
?#@*&%! | Sciencx (2021-08-15T10:42:23+00:00) The Easiest Way to Create and Manage App Icons for React Native on IOS & Android. Retrieved from https://www.scien.cx/2021/08/15/the-easiest-way-to-create-and-manage-app-icons-for-react-native-on-ios-android/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.