@abundiko/rn-genicons

Quickly generate thin, high-performance and adaptive icon components for React Native from SVG files. Supports standard StyleSheet, NativeWind v2 (v4, v5 [BETA]), and Uniwind.

NOTE

this package depends on react-native-svg so you must have configured it first

Table of Contents

• Features
• Installation
• Configuration
  • Parameters
  • Method 1: package.json (Recommended)
  • Method 2: CLI Arguments
  • Method 3: .rn-geniconsrc File
• Usage in App
• Best Practices
• License

Features

• 🚀 High Performance: Generates a single file with optimized icon components.
• 🎨 Style Support: Seamless integration with NativeWind, UniWind, and standard React Native StyleSheet.
• 📦 TS/JS Support: Automatically generates .tsx, .jsx, or .js files with appropriate types.
• 🛠️ Configurable: Setup via CLI, package.json, or .rc file.
• 🌈 Customizable: Optional SVG size reset and color neutralization.

Installation

npm install @abundiko/rn-genicons --dev

or

bun add @abundiko/rn-genicons -d

Configuration

You can configure rn-genicons using multiple methods. We recommend using package.json for persistent configuration.

Parameters

| Option | CLI Flag | Description | Default | | ------------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | | in | -i, --in | Required. Path to the folder containing your .svg icons. | - | | out | -o, --out | Required. Path to the generated output file (must end in .js, .jsx, or .tsx). | - | | style | -s, --style | Required. Styling system to use: stylesheet, uniwind, nativewindv2, nativewindv4, nativewindv5. | - | | name | -n, --name | The name of the exported object containing all icons. | Icons | | alias | -a, --alias | the full folder path with alias to use for SVG imports (useful if your SVGs are in a different module). eg: @/assets/images/icons | (Auto-relative) | | svgFullSize | --svg-full-size | If true, resets width and height of SVGs to 100%. This allows you to specify a width and height with style or className. | false | | unsafeNeutralizeColors | --unsafe-neutralize-colors | ⚠️ If true, replaces all hex colors for fill and stroke with currentColor. keep multi-colored icons in a seperate folder to avoid loss or colors. | false |

Method 1: package.json (Recommended)

Add a rn-genicons key to your package.json:

{
  "name": "your-app",
  "scripts": {
    "icons": "rn-genicons"
  },
  "rn-genicons": {
    "in": "./assets/icons",
    "out": "./src/components/Icons.tsx",
    "style": "nativewindv4",
    "svgFullSize": true
  }
}

Then run:

npm run icons

Method 2: CLI Arguments

npx rn-genicons -i ./icons -o ./src/Icons.tsx -s nativewindv5 --svg-full-size true

Method 3: .rn-geniconsrc File

Create a .rn-geniconsrc (JSON or YAML) in your project root:

{
  "in": "./assets/svgs",
  "out": "./src/generated/icons.js",
  "style": "stylesheet"
}

Usage in App

Once generated, use your icons easily:

import { Icons } from "./src/components/Icons";

function App() {
  return (
    <Icons.Home
      className="text-blue-500 w-10 h-10" // Works if style is nativewind or uniwind
      style={{ marginTop: 10 }}
    />
  );
}

Best Practices

• make sure you have configured react-native-svg first.

• use snake_casing and avoid special characters in your svg files' names.

License

MIT