🚀 React Native App Icon Generator

A lightweight and hassle-free CLI tool to generate iOS and Android app icons in your React Native project from a single 1024x1024 PNG image — no config required, just run and go!

---

✨ Features

✅ One command to generate all required icons
✅ No manual image resizing needed
✅ Automatically finds your app_icon.png
✅ Replaces icons in the correct native folders
✅ CLI options for background, platform, output dir
✅ Supports adaptive Android icons
✅ Works with any React Native structure
✅ Interactive mode if no arguments are provided

---

🔧 How to Use

1️⃣ Option 1: Let It Find app_icon.png Automatically

Place a high-resolution 1024x1024 PNG named app_icon.png anywhere in your project.

📁 Example:

your-project/
├── src/
│ └── assets/
│ └── app_icon.png

Then run:

1npx rn-app-icon-generator

---

2️⃣ Option 2: Provide Icon Path Manually

You can specify your own icon path:

1npx rn-app-icon-generator ./assets/your_icon.png \
2  --background "#ffffff" \
3  --platform all \

---

3️⃣ Use Additional CLI Options

1npx rn-app-icon-generator ./assets/your_icon.png \
2  --background "#ffffff" \
3  --platform all \
4  --output ./custom-icons \
5  --mask ./assets/masks/circle-mask.png (png or svg)

---

⚙️ CLI Options

Option	Description
--background	Background color (hex format). Default: #ffffff
--platform	Platform to generate: android, ios, or all. Default: all
--output	Optional output directory (useful for preview/testing)
--mask	Optional mask file (PNG/SVG) for Android adaptive icons foreground

💡 If no arguments are provided, the tool enters interactive mode.

---

🧱 Mask Support (Adaptive Android Icons)

The --mask option allows shaping the foreground icon for Android adaptive icons.

✅ Supported Mask Formats:

• .png — black & transparent areas (alpha mask)
• .svg — vector path (e.g., circle, rounded square)

🖼️ How It Works:

• The mask is applied to the foreground icon (ic_launcher_foreground.png)
• Using alpha masking or SVG shape with sharp.composite(..., blend: "dest-in")
• This creates a custom-shaped icon for modern Android launchers

📐 Example Usage:

npx rn-app-icon-generator ./assets/your_icon.png \
  --background "#ffffff" \
  --platform all \
  --mask ./assets/masks/circle-mask.svg

🎨 PNG Mask Example

A 1024x1024 PNG with:

• White or opaque = visible area
• Black or transparent = cropped area

📁 Example:

./assets/masks/circle-mask.svg

🧭 SVG Mask Example

Example circle-mask.svg:

Download SVG

You can also use:

• Rounded rectangles
• Circle
• Any SVG path

---

📂 Output Paths

Platform	Path Example
Android	android/app/src/main/res/mipmap-*/ic_launcher.png and ic_launcher_round.png
Android Adaptive	mipmap-*/ic_launcher_foreground.png, plus ic_launcher.xml & colors.xml
iOS	ios/YourApp/Images.xcassets/AppIcon.appiconset/ with Contents.json

---

📦 Optional: Local Installation

Install as a dev dependency:

1npm install rn-app-icon-generator --save-dev

Run with:

1npx rn-app-icon-generator

---

🧠 Pro Tips

• ✅ PNG must be 1024x1024 for best results (no SVG support).
• 🧼 Use solid backgrounds unless transparency is intentional.
• 📱 Make sure iOS folder has a valid `.xcodeproj` file.
• 🧪 Works on both macOS, Linux, and Windows.

---

💻 Example Script (CI/CD)

1npx rn-app-icon-generator ./branding/your_icon.png --background "#000000" --platform all

Add to your package.json scripts:

1"scripts": {
2    "generate:icons": "rn-app-icon-generator ./branding/your_icon.png --background '#ffffff' --platform all"
3}

---

📄 License

Licensed under the MIT License.

---

Created by Ara Apps Dev