# react-native-solar-icons

Beautiful Solar icon set for React Native and Expo - **1200+ premium SVG icons** in 6 different styles.

[![npm version](https://img.shields.io/npm/v/react-native-solar-icons.svg)](https://www.npmjs.com/package/react-native-solar-icons)
[![license](https://img.shields.io/npm/l/react-native-solar-icons.svg)](https://github.com/EbenJesusSaves/react-native-solar-icons/blob/main/LICENSE)

## ✨ Features

- 🎨 **6 Icon Styles**: Bold, Bold Duotone, Broken, Line Duotone, Linear, Outline
- 📦 **1200+ Icons** across 35+ categories
- 🎯 **Full TypeScript Support** with complete type definitions
- 📱 **React Native & Expo** compatible out of the box
- 🎨 **Customizable** colors and sizes via props
- 🌈 **Duotone Support** with primary and secondary colors

## 📦 Installation

### Using npm

```bash
npm install react-native-solar-icons react-native-svg
```

### Using Yarn

```bash
yarn add react-native-solar-icons react-native-svg
```

### Expo

```bash
npx expo install react-native-solar-icons react-native-svg
```

> **Note:** This package requires `react-native-svg` as a peer dependency.

## 🚀 Quick Start

### Option 1: Direct Import (Recommended - Tree-shakeable)

Import individual icons directly for the smallest bundle size:

```tsx
import { Home, ArrowDown, Heart } from "react-native-solar-icons/icons/linear";
import { Star } from "react-native-solar-icons/icons/bold";
import { Home as HomeDuotone } from "react-native-solar-icons/icons/bold-duotone";

function App() {
  return (
    <>
      {/* Basic usage */}
      <Home width={24} height={24} color="#000000" />

      {/* With custom size and color */}
      <ArrowDown width={32} height={32} color="#3b82f6" />

      {/* Bold style */}
      <Heart width={24} height={24} color="#ef4444" />

      {/* Duotone with primary and secondary colors */}
      <HomeDuotone
        width={32}
        height={32}
        primaryColor="#000000"
        secondaryColor="#999999"
      />
    </>
  );
}
```

**Available style imports:**

- `react-native-solar-icons/icons/linear`
- `react-native-solar-icons/icons/bold`
- `react-native-solar-icons/icons/outline`
- `react-native-solar-icons/icons/broken`
- `react-native-solar-icons/icons/bold-duotone`
- `react-native-solar-icons/icons/line-duotone`

### Option 2: Using SolarIcon Component

Unified API for runtime icon selection (larger bundle):

```tsx
import { SolarIcon } from "react-native-solar-icons";

function App() {
  return (
    <>
      {/* Basic usage - defaults to "linear" style */}
      <SolarIcon name="Home" />

      {/* With size and color */}
      <SolarIcon name="ArrowDown" size={32} color="#3b82f6" />

      {/* Different icon styles */}
      <SolarIcon name="Heart" type="bold" size={24} color="#ef4444" />
      <SolarIcon name="Star" type="outline" size={28} color="#f59e0b" />

      {/* Duotone icons with two colors */}
      <SolarIcon
        name="Home"
        type="bold-duotone"
        size={32}
        primaryColor="#000000"
        secondaryColor="#999999"
      />
    </>
  );
}
```

### SolarIcon Props

| Prop             | Type        | Default     | Description                               |
| ---------------- | ----------- | ----------- | ----------------------------------------- |
| `name`           | `IconName`  | _required_  | The icon name (e.g., "Home", "ArrowDown") |
| `type`           | `IconStyle` | `"linear"`  | Icon style variant                        |
| `size`           | `number`    | `24`        | Icon width and height                     |
| `color`          | `string`    | `"#000000"` | Icon color (shorthand for primaryColor)   |
| `primaryColor`   | `string`    | -           | Primary icon color                        |
| `secondaryColor` | `string`    | -           | Secondary color (for duotone icons)       |

Plus all standard `react-native-svg` `SvgProps`.

### Available Icon Styles

| Style        | Type Value       | Description                    |
| ------------ | ---------------- | ------------------------------ |
| Bold         | `"bold"`         | Filled, solid icons            |
| Bold Duotone | `"bold-duotone"` | Two-color filled icons         |
| Broken       | `"broken"`       | Broken/interrupted line icons  |
| Line Duotone | `"line-duotone"` | Two-color outlined icons       |
| Linear       | `"linear"`       | Clean outlined icons (default) |
| Outline      | `"outline"`      | Simple outline icons           |

## � Bundle Size & Tree-Shaking

**Direct imports are recommended** for optimal bundle size:

- ✅ **~700 bytes** per icon when using direct imports (e.g., `from "react-native-solar-icons/icons/linear"`)
- ⚠️ **~145MB** when importing from main entry (`from "react-native-solar-icons"`)

The library is built with `preserveModules` to enable proper tree-shaking. Modern bundlers (Metro, Webpack, etc.) will only include the icons you actually import.

**Example bundle impact:**

```tsx
// ✅ Optimal - Only ~2KB added to bundle
import { Home, Heart } from "react-native-solar-icons/icons/linear";

// ⚠️ Not recommended - Includes all icons
import { SolarIcon } from "react-native-solar-icons";
```

## �📚 TypeScript Support

The library provides full TypeScript support with:

- `IconName` - Union type of all available icon names
- `IconStyle` - Union type of all style variants
- `SolarIconProps` - Props interface for the SolarIcon component
- `IconProps` - Base props for individual icon components

```tsx
import type {
  IconName,
  IconStyle,
  SolarIconProps,
} from "react-native-solar-icons";

// Type-safe icon names
const iconName: IconName = "Home";
const style: IconStyle = "bold-duotone";
```

## 🎨 Icon Categories

Icons are organized into categories including:

- Arrows & Navigation
- Business & Statistics
- Communication & Messages
- Design Tools
- Electronic Devices
- Essential UI
- Files & Folders
- Home & Furniture
- Maps & Location
- Media & Sound
- Nature & Weather
- Security & Privacy
- Shopping & E-commerce
- Social & Users
- And many more...

## 🔧 Development

### Building from source

```bash
# Install dependencies
npm install

# Generate icon components from SVGs
npm run codegen

# Build the library
npm run build
```

### Adding new icons

1. Add SVG files to the appropriate `icons/<Style>/<Category>/` folder
2. Run `npm run codegen` to regenerate components
3. Run `npm run build` to rebuild the library

## 📄 License

MIT License - see [LICENSE](./LICENSE) for details.

## 🙏 Credits

Based on the [Solar Icon Set](https://www.figma.com/community/file/1166831539721848736) by 480 Design.