# icon-set-creator

> Android & iOS icon generator for React Native

Latest version **1.2.6** (published 2023-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install icon-set-creator
pnpm add icon-set-creator
yarn add icon-set-creator
bun add icon-set-creator
```

Provides the command `iconset`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.6 |
| Published | 2023-10-26 |
| First published | 2021-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=14 |
| Dependencies | 8 |
| Unpacked size | 71 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 311 |
| Author | martiliones |
| Maintainers | martiliones |
| Keywords | cli, mobile, react-native, icons, android-studio, Xcode, icon-set-creator |

## Links

- npm: https://www.npmjs.com/package/icon-set-creator
- Repository: https://github.com/martiliones/icon-set-creator
- Homepage: https://github.com/martiliones/icon-set-creator#readme
- Issues: https://github.com/martiliones/icon-set-creator/issues
- npm.io page: https://npm.io/package/icon-set-creator

## Dependencies (8)

- [chalk](https://npm.io/package/chalk.md) ^4.1.2
- [leven](https://npm.io/package/leven.md) ^3.1.0
- [sharp](https://npm.io/package/sharp.md) ^0.30.5
- [semver](https://npm.io/package/semver.md) ^7.3.7
- [minimist](https://npm.io/package/minimist.md) ^1.2.6
- [read-pkg](https://npm.io/package/read-pkg.md) ^5.1.1
- [commander](https://npm.io/package/commander.md) ^9.2.0
- [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [stockfish](https://npm.io/package/stockfish.md) — 27.0K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads

## Recent versions

- 1.2.6 (latest) — 2023-10-26
- 1.1.6 — 2023-08-12
- 1.1.5 — 2023-01-16
- 1.1.4 — 2023-01-16
- 1.1.3 — 2022-08-09
- 1.1.2 — 2022-08-09
- 1.1.1 — 2022-08-09
- 1.1.0 — 2022-08-09
- 1.0.0 — 2022-05-29
- 0.1.4 — 2021-12-09
- 0.1.3 — 2021-10-11
- 0.1.2 — 2021-08-24
- 0.1.1 — 2021-08-16
- 0.1.0 — 2021-08-15

## README

[1]: https://www.npmjs.com/package/icon-set-creator

<header>
<p align="center">
  <img src="assets/iphone.png" alt="logo" width="400">
</p>
<h1 align="center">
Icon Set Creator
</h1>
<p align="center">
Android & iOS icon generator for React Native
</p>
<p align="center">
<a href="https://www.npmjs.com/package/icon-set-creator" target="__blank"><img src="https://img.shields.io/npm/v/icon-set-creator?color=7DE1D1&label=" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/icon-set-creator" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/icon-set-creator?color=6AC704&label="></a>
<a href="https://github.com/martiliones/icon-set-creator" target="__blank"><img src="https://img.shields.io/github/license/martiliones/icon-set-creator.svg?label=&message=themes&color=FFB706" alt="License"></a>
<img src="https://img.shields.io/codecov/c/github/martiliones/icon-set-creator?color=FF4F4D&logoColor=FF4F4D" alt="Code Coverage">
<br>
<a href="https://github.com/martiliones/icon-set-creator" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/martiliones/icon-set-creator?style=social"></a>
</p>
</header>

- 🌈 <b>Easy to install</b> — does not require additional software
- ⚡️ <b>Fast</b> — image manipulation powered by [sharp](https://github.com/lovell/sharp)
- 🛠 <b>Configurable</b> — using cli options or config file
- 📱 <b>iOS and Android support</b> — create icons for both platforms with one command
- 🌟 <b>Adaptive Icons</b> — support for color and image backgrounds
- 🟢 <b>Round Icons</b> — automatically generated for Android

<h2>⚡️ Quick Start</h2>

You can run the icon generator with the npx command (available in Node.js 8.2.0 and later).

```bash
$ npx icon-set-creator create ./path/to/icon.png
```

For earlier Node versions, see [🚀 Installation](#-installation) section below.

<h2>🚀 Installation</h2>

> **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](https://github.com/tj/n), [nvm](https://github.com/creationix/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows) .

<h3>Global</h3>

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

```bash
$ 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:

```bash
$ iconset --version
```

<h3>Local for a project</h3>

If you want to install the [`icon-set-creator`][1] **locally**, use one of the following commands:

```bash
$ npm install icon-set-creator -D
# OR
$ yarn add icon-set-creator -D
```

<h2>🧪 Usage</h2>

To create app icon you need:
- PNG icon for IOS and Android (Highly recommend using an icon with a size of at least 1024x1024 pixels). You can check the [`example`](https://github.com/martiliones/icon-set-creator/tree/master/example) folder for example icons.
- You can also create Adaptive Icon for Android, which can display a variety of shapes across different device models ([Learn More](https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive)). To create it you need a foreground image and a background color or image. [There is also a good article](https://medium.com/google-design/designing-adaptive-icons-515af294c783) on how to design such icons.

The easiest way to use [`icon-set-creator`][1] is to specify the path to icon using `iconset create` command in root of your project:
```bash
$ 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`:
```json5
{
  "scripts": {
    "create-appicon": "iconset create ./icon.png"
  }
}
```

It will generate icons of different sizes for Android and iOS.

<h2>⚙️ Configuration</h2>

There are two primary ways to configure [`icon-set-creator`][1]:

- **CLI parameters** - use the command options.
- **Configuration files** - use a JavaScript, JSON, or `package.json` file to specify configuration information to generate an application icon depending on your code style.

<h3> CLI parameters </h3>

To display all of the options for the given command, run `iconset <command> --help`. For example:

```bash
$ 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
```

<h3> Configuration files </h3>

[`icon-set-creator`][1] supports configuration files in several formats:

- JavaScript - use `.iconsetrc.js` and export an object containing your configuration.
- JSON - use `.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`][1] 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:

```js
// .iconsetrc.js
module.exports = {
  imagePath: './assets/icon.png',

  adaptiveIconBackground: './assets/icon-background.png',
  adaptiveIconForeground: './assets/icon-foreground.png',
};
```

<h4> iconset create </h4>

- `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 files
- `android`/`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 icon
- `adaptiveIconForeground` — The image asset which will be used for the icon foreground of the adaptive icon

<h1></h1>

<p align="center">✨ You are amazing!</p>

---
_Source: https://npm.io/package/icon-set-creator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._