๐ŸŒˆ Icon Set Creator for React Native

Last update: May 2, 2022

logo

Icon Set Creator

NPM version NPM Downloads License Code Coverage GitHub stars

  • ๐ŸŒˆ Easy to install โ€” does not require additional programs
  • โšก๏ธ Fast โ€” image manipulation powered by sharp
  • ๐Ÿ›  Configurable โ€” using cli options or config file
  • ๐ŸŒŸ Adaptive Icons โ€” support for color and image backgrounds
  • ๐Ÿ“ฑ iOS and Android support โ€” create icons for both platforms with one command

๐Ÿš€ Installation

Global

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

Local for a project

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

๐Ÿงช Usage

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 ways you can configure icon-set-creator. The first with the cli parameters, and the second is through the config file iconset.config.js or package.json depending on your code style.

Config options

  • 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 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 icon
  • adaptiveIconForeground โ€” The image asset which will be used for the icon foreground of the adaptive icon

CLI options

Usage: iconset create [options] [image-path]

Generate a new icon set for React Native project

Options:
  -A, --android [icon-name]                    Generate icon set for android
  -IPA, --image-path-android                   Image path for android
  -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
  -IPI, --image-path-ios                       Image path for ios
  -h, --help                                   display help for command

๐Ÿ‘€ Example

You can check the example folder for example icons and this guide on Medium.

โœจ You are amazing!

GitHub

https://github.com/martiliones/icon-set-creator
Comments
  • 1. Can not create pull request

    Hi @martiliones I want to create a pull request to fix the issue https://github.com/martiliones/icon-set-creator/issues/7 but can't push my changes to the remote The error log

    Permission to martiliones/icon-set-creator.git denied to tsdmrfth. unable to access 'https://github.com/martiliones/icon-set-creator.git/': The requested URL returned error: 403

    Reviewed by tsdmrfth at 2022-01-10 09:40
  • 2. TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

    I am getting this error while generating the icons for Android. Library working fine for iOS.

    $ iconset create ./src/Assets/common/icon.png
     INFO  Creating default icons Android...
    
     ERROR  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
        at new NodeError (node:internal/errors:371:5)
        at validateString (node:internal/validators:119:11)
        at Object.resolve (node:path:1098:7)
        at /Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/lib/utils/android.js:57:38
        at new Promise (<anonymous>)
        at exports.createAndroidIcons (/Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/lib/utils/android.js:56:10)
        at create (/Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/lib/create.js:44:13)
        at Command.<anonymous> (/Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/bin/iconset.js:65:29)
        at Command.listener [as _actionHandler] (/Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/node_modules/commander/lib/command.js:488:17)
        at /Users/yogeshsingh/Documents/Projects/ReactNative/mobile-app/node_modules/icon-set-creator/node_modules/commander/lib/command.js:1227:65 {
      code: 'ERR_INVALID_ARG_TYPE'
    }
    

    Other Details: icon-set-creator 0.1.3 react-native 0.66.2 node v16.13.0

    Reviewed by yksingh12 at 2021-11-24 11:56
  • 3. Pass context to createAndroidIcons

    In the absence of this context remains undefined and iconset creation fails with error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

    Reviewed by paneer-tikka at 2021-11-02 08:56
  • 4. Error when trying to generate icons for Android and iOS

    I have tried to call command in my console - iconset create ./icon.png. Next log was displayed in the console:

    /usr/local/lib/node_modules/icon-set-creator/lib/utils/android.js:253
          return line.replaceAll(/android:icon="[^"]*(\\"[^"]*)*"/g,
                      ^
    
    TypeError: line.replaceAll is not a function
        at /usr/local/lib/node_modules/icon-set-creator/lib/utils/android.js:253:19
        at Array.map (<anonymous>)
        at transformAndroidManifestIcon (/usr/local/lib/node_modules/icon-set-creator/lib/utils/android.js:243:34)
        at /usr/local/lib/node_modules/icon-set-creator/lib/utils/android.js:276:27
        at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
    

    I have replaced the [string].replaceAll with the [string].replace in the file /usr/local/lib/node_modules/icon-set-creator/lib/utils/android.js: 253: 19. Icons for Android have been generated successfully. Then the same error was repeated for iOS:

       /usr/local/lib/node_modules/icon-set-creator/lib/utils/ios.js:137
                lines[i] = line.replaceAll(/=(.*);/g, `= ${iconName};`);
                                ^
    
    TypeError: line.replaceAll is not a function
        at /usr/local/lib/node_modules/icon-set-creator/lib/utils/ios.js:137:29
        at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
    

    I have replaced the [string].replaceAll with the [string].replace in the file /usr/local/lib/node_modules/icon-set-creator/lib/utils/ios.js:137:29. Icons for iOS have been generated successfully.

    Reviewed by designervoid at 2021-10-10 16:30
  • 5. ๐ŸŽ‰ Version 0.1.2 (#5)

    • Add mockup to README

    • Update README.md

    • Optimize getting app name

    • Write tests and fix bugs

    • Update iPhone in README

    • Create CODE_OF_CONDUCT.md

    • Update .npmignore

    • Update keywords

    Reviewed by martiliones at 2021-08-24 06:50
  • 6. Adaptive icons don't seem to generate

    I've tried to run iconset create or an existing project, using the config from https://dev.to/martiliones/the-easiest-way-to-create-and-manage-app-icons-for-react-native-on-ios-android-52j0

    module.exports = {
      imagePath: './icons/icon.png',
    
      adaptiveIconBackground: './icons/background.png',
      adaptiveIconForeground: './icons/foreground.png'
    };
    

    With the images provided in /example and it doesn't generate the adaptive icons. I also tried in a fresh project (using the template npx react-native init TestIconSetGenerator --template react-native-template-typescript --skip-install and got the same result) I'm using 0.1.4 as it was, and I also tried applying with patch #14 manually (because I needed the round icons)

    Reviewed by andrepaulo-bit at 2022-02-22 09:20
  • 7. Support multiple targets/flavor Icons

    Is it possible to support multiple icons for different iOS Targets / Android flavors?

    I used this tutorial to enable multiple targets/flavors for my react native project: https://thecodingmachine.github.io/react-native-boilerplate/docs/BetaBuild/

    Reviewed by ManAnRuck at 2022-02-12 13:22
  • 8. Feature/android round icons

    Fixes android round icon generation issue. https://github.com/martiliones/icon-set-creator/issues/7

    I didn't implement AndroidManifes.xml file replacing functionality since it uses default names for icons (ic_launcher, ic_launcher_round) that's why I think no need to replace them.

    Reviewed by tsdmrfth at 2022-01-18 20:32
  • 9. Round icons not generated

    Hi, I have used this plugin and it helped me to generate icons for both iOS and android. I have just one query it is not generating round icons for android app. as it is still getting the same old default icons. Is there any work around which can generate round icons and add them automatically for android?

    Reviewed by MZabih at 2021-09-28 05:20
A barcode scanner component for react native - not maintained anymore - use react-native-camera

react-native-barcodescanner - not maintained anymore - use react-native-camera Version 0.4.0 of react-native-camera includes barcode scanning for andr

May 2, 2022
React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

React Native CallKit utilises a brand new iOS 10 framework CallKit to make the life easier for VoIP developers using React Native.

Jan 6, 2022
React-native-wordle - A simple re-implementation of wordle using react native

react native wordle A simple re-implementation of wordle. guess the randomly cho

May 8, 2022
Native filesystem access for react-native

react-native-fs Native filesystem access for react-native IMPORTANT For RN < 0.57 and/or Gradle < 3 you MUST install react-native-fs at version @2.11.

May 7, 2022
react-native native module for In App Purchase.
react-native native module for In App Purchase.

Announcement React Native IAP hook is out. You can see medium post on how to use it. The react-native-iap module hasn't been maintained well recently.

May 13, 2022
React Native authentication with the native Touch ID popup.

React Native Touch ID React Native Touch ID is a React Native library for authenticating users with biometric authentication methods like Face ID and

May 13, 2022
Native sensors access for react-native

react-native-sensor-manager Wrapper for react-native. Accelerometer, Gyroscope, Magnetometer, Orientation, Step Counter, Thermometer, LightSensor, and

Mar 28, 2022
React Native: Native Bottom Sheet - Text View
React Native: Native Bottom Sheet - Text View

ReactNative: Native Bottom Sheet Text View (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, Y

Jul 4, 2021
React Native Unofficial SDK for integrating MercadoPago PX Native UIs.
React Native Unofficial SDK for integrating MercadoPago PX Native UIs.

React Native Unofficial SDK for integrating MercadoPago PX Native UIs. Getting Started To integrate this SDK you can check out our docs. Add your App

Apr 20, 2022
๐Ÿ”ฅ A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.
๐Ÿ”ฅ A well-tested feature-rich modular Firebase implementation for React Native. Supports both iOS & Android platforms for all Firebase services.

React Native Firebase React Native Firebase is a collection of official React Native modules connecting you to Firebase services; each module is a lig

May 7, 2022
React Native Local and Remote Notifications

React Native Push Notifications React Native Local and Remote Notifications for iOS and Android ?? Version 7.x is live ! ?? Check out for changes and

May 14, 2022
Device Information for React Native iOS and Android

react-native-device-info Device Information for React Native. TOC Installation Linking Usage API Troubleshooting Release Notes react-native-dom / reac

May 16, 2022
An unified permissions API for React Native on iOS and Android
An unified permissions API for React Native on iOS and Android

โ˜?? react-native-permissions A unified permissions API for React Native on iOS, Android and Windows. (For Windows only builds 18362 and later are supp

May 13, 2022
React Native Notifications
React Native Notifications

React Native Notifications Handle all the aspects of push notifications for your app, including remote and local notifications, interactive notificati

May 6, 2022
Keychain/Keystore Access for React Native
 Keychain/Keystore Access for React Native

Keychain/Keystore Access for React Native Keychain/Keystore Access for React Native Installation Usage API setGenericPassword(us

May 13, 2022
react native module for firebase cloud messaging and local notification
react native module for firebase cloud messaging and local notification

Deprecated I'm not longer able to maintain this repo. check react-native-firebase instead To existing react-native-fcm users react-native-firebase now

Apr 30, 2022
React Native binding for iOS ARKit
React Native binding for iOS ARKit

โš ๏ธ LOOKING FOR MAINTAINERS - This Repo is currently not maintained. Give https://github.com/viromedia/viro/ a try which has been open sourced and also

Apr 22, 2022
React Native Contacts
React Native Contacts

To contribute read CONTRIBUTING.md. Ask questions on stackoverflow not the issue tracker. Usage getAll is a database intensive process, and can take a

May 13, 2022
React Native Library for OneSignal Push Notifications Service
React Native Library for OneSignal Push Notifications Service

React Native OneSignal SDK OneSignal is a free push notification service for mobile apps. This SDK makes it easy to integrate your native React-Native

May 16, 2022