# solar-icons-rn

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

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

## ✨ Features

- 🎨 **6 Icon Styles**: Bold, Bold Duotone, Broken, Line Duotone, Linear, Outline
- 📦 **1500+ Icons** across 35+ categories
- 🎯 **TypeScript Support** with full type definitions
- ⚡ **Tree-shakeable** - only bundle the icons you use
- 📱 **React Native & Expo** compatible
- 🎨 **Customizable** colors and sizes via props

## 📦 Installation

### Using Yarn (recommended)

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

### Using npm

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

### Expo

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

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

## 🚀 Quick Start

### Using SolarIcon Component (Recommended)

The simplest way to use icons with a unified API:

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

function App() {
  return (
    <>
      {/* Default type is "linear" */}
      <SolarIcon name="Home" size={24} color="#000" />

      {/* Specify different icon types */}
      <SolarIcon name="ArrowDown" type="bold" size={24} color="#3b82f6" />
      <SolarIcon name="Heart" type="outline" size={32} color="#ef4444" />
      <SolarIcon name="Star" type="bold-duotone" size={28} color="#f59e0b" />
    </>
  );
}
```

#### SolarIcon Props

| Prop             | Type                                                                              | Default    | Description                               |
| ---------------- | --------------------------------------------------------------------------------- | ---------- | ----------------------------------------- |
| `name`           | `string`                                                                          | _required_ | The icon name (e.g., "Home", "ArrowDown") |
| `type`           | `"bold" \| "bold-duotone" \| "broken" \| "line-duotone" \| "linear" \| "outline"` | `"linear"` | Icon style                                |
| `size`           | `number`                                                                          | -          | Shorthand for width and height            |
| `color`          | `string`                                                                          | -          | Shorthand for primaryColor                |
| `primaryColor`   | `string`                                                                          | -          | Primary icon color                        |
| `secondaryColor` | `string`                                                                          | -          | Secondary color (for duotone icons)       |
| `width`          | `number`                                                                          | -          | Icon width                                |
| `height`         | `number`                                                                          | -          | Icon height                               |

### Import Individual Icons

For optimal tree-shaking, import icons directly:

```tsx
import { Bold, Linear, Outline } from "solar-icons-rn";

// Using category exports
function App() {
  return (
    <>
      <Bold.Arrows.ArrowDown primaryColor="#000" width={24} height={24} />
      <Linear.EssentionalUI.Home
        primaryColor="#3b82f6"
        width={32}
        height={32}
      />
      <Outline.Users.User primaryColor="#10b981" width={24} height={24} />
    </>
  );
}
```

### Using getIconComponent Helper

Dynamically get icons by type and name:

```tsx
import { getIconComponent, IconTypes } from "solar-icons-rn";

function DynamicIcon({ iconType, iconName, ...props }) {
  const IconComponent = getIconComponent(iconType, iconName);

  if (!IconComponent) return null;

  return <IconComponent {...props} />;
}

// Usage
<DynamicIcon
  iconType={IconTypes.Bold}
  iconName="Home"
  primaryColor="#000"
  width={24}
  height={24}
/>;
```

## 🎨 Icon Styles

| Style            | Import        | Description                     |
| ---------------- | ------------- | ------------------------------- |
| **Bold**         | `Bold`        | Solid filled icons              |
| **Bold Duotone** | `BoldDuotone` | Two-tone filled icons           |
| **Broken**       | `Broken`      | Broken/interrupted stroke icons |
| **Line Duotone** | `LineDuotone` | Two-tone line icons             |
| **Linear**       | `Linear`      | Clean line icons                |
| **Outline**      | `Outline`     | Outlined stroke icons           |

## 📁 Icon Categories

Icons are organized into the following categories:

- **Arrows** - Directional arrows
- **ArrowsAction** - Action arrows (download, upload, etc.)
- **Astronomy** - Space and astronomy icons
- **BuildingInfrastructure** - Buildings and structures
- **BusinessStatistic** - Charts and graphs
- **Call** - Phone and call icons
- **DesignTools** - Design and editing tools
- **ElectronicDevices** - Devices and electronics
- **EssentionalUI** - Essential UI elements
- **FacesEmotionsStickers** - Emojis and faces
- **Files** - File types and documents
- **Folders** - Folder icons
- **FoodKitchen** - Food and kitchen items
- **Hands** - Hand gestures
- **HomeFurniture** - Home and furniture
- **Like** - Hearts, stars, and reactions
- **List** - List and menu icons
- **MapLocation** - Maps and location
- **Medicine** - Medical icons
- **MessagesConversation** - Chat and messaging
- **Money** - Finance and payment
- **NatureTravel** - Nature and travel
- **NetworkITProgramming** - Tech and programming
- **Notes** - Notes and documents
- **Notifications** - Alerts and notifications
- **School** - Education icons
- **Search** - Search and magnifier
- **Security** - Security and privacy
- **SettingsFineTuning** - Settings and controls
- **ShoppingEcommerce** - Shopping and e-commerce
- **Sports** - Sports and fitness
- **TextFormatting** - Text and typography
- **Time** - Time and calendar
- **TransportPartsService** - Vehicles and transport
- **Users** - User and people icons
- **VideoAudioSound** - Media controls
- **Weather** - Weather icons

## 🎯 Props

All icons accept the following props:

| Prop             | Type     | Default          | Description                         |
| ---------------- | -------- | ---------------- | ----------------------------------- |
| `width`          | `number` | `24`             | Icon width                          |
| `height`         | `number` | `24`             | Icon height                         |
| `primaryColor`   | `string` | `"currentColor"` | Primary/stroke color                |
| `secondaryColor` | `string` | -                | Secondary color (for duotone icons) |

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

## 📝 TypeScript

Full TypeScript support with exported types:

```tsx
import type {
  IconType,
  IconComponentType,
  BoldIconName,
  LinearIconName,
  // ... other icon name types
} from "solar-icons-rn";
```

### Available Types

- `IconTypes` - Enum of icon style types
- `IconType` - Union type of all icon types
- `IconComponentType` - React component type for icons
- `BoldIconName` - Union of all Bold icon names
- `BoldDuotoneIconName` - Union of all Bold Duotone icon names
- `BrokenIconName` - Union of all Broken icon names
- `LineDuotoneIconName` - Union of all Line Duotone icon names
- `LinearIconName` - Union of all Linear icon names
- `OutlineIconName` - Union of all Outline icon names

## 💡 Examples

### Custom Colored Icon

```tsx
import { Bold } from "solar-icons-rn";

<Bold.Like.Heart width={32} height={32} primaryColor="#ef4444" />;
```

### Duotone Icon with Two Colors

```tsx
import { BoldDuotone } from "solar-icons-rn";

<BoldDuotone.EssentionalUI.Home
  width={32}
  height={32}
  primaryColor="#3b82f6"
  secondaryColor="#93c5fd"
/>;
```

### Icon Button Component

```tsx
import { TouchableOpacity } from "react-native";
import { Linear } from "solar-icons-rn";

function IconButton({ onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <Linear.SettingsFineTuning.Settings
        width={24}
        height={24}
        primaryColor="#374151"
      />
    </TouchableOpacity>
  );
}
```

## 📄 License

MIT © [EbenJesusSaves](https://github.com/EbenJesusSaves)

## 🙏 Credits

Icons designed by [Solar Icons](https://www.figma.com/community/file/1166831539721848736).

## 🤝 Contributing

Contributions are welcome! We appreciate your help in making this library better.

Please read our [Contributing Guide](CONTRIBUTING.md) for details on:
- How to set up your development environment
- Our code of conduct
- The pull request process
- Coding standards and best practices

Quick start:
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'feat: add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.

## 📬 Support

If you have any questions or issues, please [open an issue](https://github.com/EbenJesusSaves/solar-icons-rn/issues) on GitHub.