npm package: @grupor5/raya-icons
Description: Icon library for Raya Design System
Latest version: 0.1.7

# @grupor5/raya-icons

Icon library for Raya Design System - Optimized for tree-shaking and performance.

## 🚀 Installation

```bash
npm install @grupor5/raya-icons
# or
yarn add @grupor5/raya-icons
# or
pnpm add @grupor5/raya-icons
```

## 📖 Usage

### Recommended: Individual Imports (Best Tree-Shaking)

```tsx
import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';
import { EditIcon } from '@grupor5/raya-icons/icons/EditIcon';

function MyComponent() {
  return (
    <div>
      <AddIcon size={24} color="blue" />
      <EditIcon size={20} />
    </div>
  );
}
```

### Barrel Imports (Common Icons Only)

```tsx
import { AddIcon, EditIcon, CheckIcon } from '@grupor5/raya-icons';

function MyComponent() {
  return (
    <div>
      <AddIcon size={24} />
      <EditIcon size={20} />
      <CheckIcon size={16} />
    </div>
  );
}
```

## 🎨 Icon Props

All icons accept the following props:

```tsx
interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;
  color?: string;
}
```

### Examples

```tsx
// Size variations
<AddIcon size={16} />
<AddIcon size={24} />
<AddIcon size="2rem" />

// Color variations
<AddIcon color="red" />
<AddIcon color="#3B82F6" />
<AddIcon color="currentColor" /> // default

// Additional SVG props
<AddIcon 
  size={24} 
  color="blue"
  className="my-icon"
  onClick={() => console.log('clicked')}
/>
```

## 📦 Bundle Size Optimization

This package is optimized for tree-shaking:

- **Individual imports**: Only the icons you use are bundled
- **Selective barrel exports**: Common icons available via main export
- **No side effects**: Marked as `"sideEffects": false`

### Bundle Size Comparison

```tsx
// ❌ Imports all icons (~850KB)
import * from '@grupor5/raya-icons';

// ✅ Imports only AddIcon (~2KB)
import { AddIcon } from '@grupor5/raya-icons/icons/AddIcon';

// ✅ Imports only common icons (~20KB)
import { AddIcon, EditIcon } from '@grupor5/raya-icons';
```

## 📂 Available Icons

This package includes 470+ icons organized by categories:

- **Archive**: ArchiveIcon, SaveIcon, BookmarkIcon...
- **Arrows**: ArrowUpIcon, ArrowDownIcon, ChevronLeftIcon...
- **Business**: ActivityIcon, ChartIcon, GraphIcon...
- **Content**: EditIcon, CopyIcon, DocumentIcon...
- **Navigation**: MenuIcon, HomeIcon, BackIcon...
- **Status**: CheckIcon, ErrorIcon, WarningIcon...
- **Users**: UserIcon, ProfileIcon, PeopleIcon...
- And many more...

### Finding Icons

You can explore all available icons by:

1. **Browse the source**: Check `/src/icons/` directory
2. **Use TypeScript**: Auto-completion will show available icons
3. **Check Storybook**: [Coming Soon] Visual icon browser

## 🔧 Development

### Scripts

```bash
# Build the package
npm run build

# Watch mode for development
npm run dev

# Generate new icon components
npm run generate:icons

# Optimize SVG files
npm run optimize:icons
```

### Adding New Icons

1. Add SVG files to the appropriate category in `/src/original/`
2. Run `npm run generate:icons` to create React components
3. Update exports in `/src/index.ts` if needed
4. Build and test

## 🤝 Related Packages

- [@grupor5/raya](https://www.npmjs.com/package/@grupor5/raya) - Main design system components

## 📄 License

MIT License - see LICENSE file for details.