npm package: @redrobui/icons
Description: Icon library for Redrob AI Design System - React & Vue support
Author: Redrob AI
Latest version: 0.4.0

# @redrobui/icons

> Comprehensive icon library for React and Vue with single-source architecture

[![npm version](https://img.shields.io/npm/v/@redrobui/icons.svg)](https://www.npmjs.com/package/@redrobui/icons)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Features

- ✅ **Single Source** - One icon library for React and Vue
- ✅ **Tree-shakeable** - Only bundle icons you use
- ✅ **TypeScript** - Full type definitions included
- ✅ **Lightweight** - Optimized SVG paths
- ✅ **Flexible** - Customizable size and color
- ✅ **Modern** - ESM and CJS support

## Installation

### For React Projects

```bash
npm install @redrobui/icons
```

**Peer Dependency:** Requires React 18+
```bash
npm install react@^18.0.0
```

### For Vue Projects

```bash
npm install @redrobui/icons
```

**Peer Dependency:** Requires Vue 3+
```bash
npm install vue@^3.0.0
```

## Usage

### React

```tsx
import { Icon } from '@redrobui/icons';

function MyComponent() {
  return (
    <div>
      {/* Basic usage */}
      <Icon name="home" size={24} color="currentColor" />
      
      {/* With custom styling */}
      <Icon 
        name="user" 
        size={32} 
        className="text-blue-500 hover:text-blue-600"
      />
      
      {/* Different sizes */}
      <Icon name="settings" size={16} />
      <Icon name="settings" size={24} />
      <Icon name="settings" size={32} />
    </div>
  );
}
```

### Vue

```vue
<template>
  <div>
    <!-- Basic usage -->
    <Icon name="home" :size="24" color="currentColor" />
    
    <!-- With custom styling -->
    <Icon 
      name="user" 
      :size="32" 
      class="text-blue-500 hover:text-blue-600"
    />
    
    <!-- Different sizes -->
    <Icon name="settings" :size="16" />
    <Icon name="settings" :size="24" />
    <Icon name="settings" :size="32" />
  </div>
</template>

<script setup>
import { Icon } from '@redrobui/icons/vue';
</script>
```

## API Reference

### Icon Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `name` | `string` | **required** | Icon name from the registry |
| `size` | `number` | `24` | Icon size in pixels |
| `color` | `string` | `'currentColor'` | Icon color (CSS color value) |
| `className` | `string` | - | Additional CSS classes (React) |
| `class` | `string` | - | Additional CSS classes (Vue) |

### TypeScript Support

```tsx
import type { IconProps } from '@redrobui/icons';

const iconProps: IconProps = {
  name: 'check',
  size: 24,
  color: 'currentColor',
};
```

## Available Icons

Access the full icon registry:

```ts
import { iconsRegistry } from '@redrobui/icons/icons-data';

// Get all available icon names
const iconNames = Object.keys(iconsRegistry);
console.log(`Total icons: ${iconNames.length}`);

// Get specific icon data
const homeIcon = iconsRegistry['home'];
console.log(homeIcon.paths); // SVG path data
console.log(homeIcon.viewBox); // Viewbox dimensions
```

### Icon Registry Structure

```ts
interface IconData {
  name: string;
  paths: string[];      // SVG path elements
  viewBox: string;      // Viewbox dimensions
  width?: number;       // Original width
  height?: number;      // Original height
}
```

## Customization

### Custom Colors

```tsx
// React
<Icon name="heart" color="#ef4444" />
<Icon name="star" className="text-yellow-500" />

// Vue
<Icon name="heart" color="#ef4444" />
<Icon name="star" class="text-yellow-500" />
```

### Custom Sizes

```tsx
// React
<Icon name="download" size={48} />
<Icon name="upload" className="w-12 h-12" />

// Vue
<Icon name="download" :size="48" />
<Icon name="upload" class="w-12 h-12" />
```

### Using with Tailwind CSS

```tsx
// React
<Icon 
  name="check" 
  className="text-green-500 hover:text-green-600 transition-colors"
/>

// Vue
<Icon 
  name="check" 
  class="text-green-500 hover:text-green-600 transition-colors"
/>
```

## Examples

### Icon Button (React)

```tsx
import { Icon } from '@redrobui/icons';

function IconButton({ icon, onClick, children }) {
  return (
    <button 
      onClick={onClick}
      className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded"
    >
      <Icon name={icon} size={20} />
      {children}
    </button>
  );
}

// Usage
<IconButton icon="download" onClick={handleDownload}>
  Download
</IconButton>
```

### Icon Button (Vue)

```vue
<template>
  <button 
    @click="onClick"
    class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded"
  >
    <Icon :name="icon" :size="20" />
    <slot />
  </button>
</template>

<script setup>
import { Icon } from '@redrobui/icons/vue';

defineProps({
  icon: String,
  onClick: Function
});
</script>

<!-- Usage -->
<IconButton icon="download" @click="handleDownload">
  Download
</IconButton>
```

## Package Exports

This package provides multiple entry points:

```ts
// React components (default)
import { Icon } from '@redrobui/icons';

// Vue components
import { Icon } from '@redrobui/icons/vue';

// Icon data/registry
import { iconsRegistry } from '@redrobui/icons/icons-data';
```

## Browser Support

- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- iOS Safari (last 2 versions)
- Chrome Android (last 2 versions)

## Contributing

Contributions are welcome! Please see the main [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.

## License

MIT © Redrob AI

---

**Part of the [Redrob Design System](https://github.com/mckinley-and-rice/redrob-ai-design-system)**

For more information, visit the [full documentation](../../DOCS.md).