npm package: @plusuidesign/iconiverse-react
Description: React components for Iconiverse icon library
Latest version: 0.1.2

# @plusuidesign/iconiverse-react

A comprehensive React icon library with **5,944+ icons** featuring both filled and outlined variants. Built for modern React applications with full TypeScript support, tree-shaking, and zero dependencies.

## Features

✨ **5,944+ Icons** - Comprehensive collection across 43 categories  
🎨 **Dual Variants** - Both filled and outlined styles  
📦 **Tree-Shakeable** - Only bundle the icons you use  
🔷 **TypeScript First** - Full type safety and IntelliSense  
⚡ **Zero Dependencies** - Standalone package, no external runtime deps  
🎯 **Framework Optimized** - Built specifically for React  
🌐 **SSR Compatible** - Works with Next.js, Remix, and Gatsby  
♿ **Accessible** - Built-in accessibility features  

## Installation

```bash
npm install @plusuidesign/iconiverse-react
# or
pnpm add @plusuidesign/iconiverse-react
# or
yarn add @plusuidesign/iconiverse-react
```

## Usage

### Basic Usage

```tsx
import { HeartFilled, StarOutlined, UserFilled } from '@plusuidesign/iconiverse-react';

function App() {
  return (
    <div>
      <HeartFilled />
      <StarOutlined className="text-yellow-500" />
      <UserFilled size={32} color="#ff0000" />
    </div>
  );
}
```

### With Tailwind CSS

```tsx
import { SearchOutlined, MenuFilled } from '@plusuidesign/iconiverse-react';

function Header() {
  return (
    <header className="flex items-center gap-4 p-4">
      <MenuFilled className="w-6 h-6 text-gray-700" />
      <SearchOutlined className="w-5 h-5 text-gray-500" />
    </header>
  );
}
```

### Props

All icon components accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `string \| number` | `24` | Icon size (width & height) |
| `color` | `string` | `'currentColor'` | Icon color |
| `strokeWidth` | `string \| number` | `2` | Stroke width for outlined icons |
| `className` | `string` | `''` | CSS class names |
| `absoluteStrokeWidth` | `boolean` | `false` | Adjusts stroke width based on icon size |

Plus all standard SVG attributes (`onClick`, `style`, `aria-label`, etc.)

### Advanced Examples

#### Custom Size and Color

```tsx
<HeartFilled 
  size={48} 
  color="#e74c3c" 
  className="hover:scale-110 transition-transform"
/>
```

#### With Click Handler

```tsx
<StarOutlined 
  size={24}
  onClick={() => console.log('Star clicked')}
  className="cursor-pointer"
/>
```

#### Accessible Icons

```tsx
<SearchOutlined 
  aria-label="Search"
  role="img"
  size={20}
/>
```

#### Dynamic Icons

```tsx
const iconMap = {
  heart: HeartFilled,
  star: StarFilled,
  user: UserFilled,
};

function DynamicIcon({ name }: { name: keyof typeof iconMap }) {
  const Icon = iconMap[name];
  return <Icon size={24} />;
}
```

## Icon Categories

Icons are organized into 43 categories:

- Animals, Arrows, Badges, Brand, Buildings
- Charts, Communication, Computers, Currencies, Database
- Design, Development, Devices, Document, E-commerce
- Electrical, Extensions, Food, Games, Gender
- Gestures, Health, Laundry, Letters, Logic
- Map, Math, Media, Misc, Mood
- Nature, Numbers, Photography, Shapes, Sport
- Symbols, System, Text, Vehicles, Version control
- Weather, Zodiac

## Icon Variants

Each icon comes in two variants:
- **Filled** - Solid, filled version (suffix: `Filled`)
- **Outlined** - Outlined version (suffix: `Outlined`)

Example:
```tsx
import { HeartFilled, HeartOutlined } from '@plusuidesign/iconiverse-react';
```

## Tree-Shaking

This package is optimized for tree-shaking. Only the icons you import will be included in your bundle:

```tsx
// ✅ Good - Only HeartFilled is bundled
import { HeartFilled } from '@plusuidesign/iconiverse-react';

// ❌ Avoid - Imports everything
import * as Icons from '@plusuidesign/iconiverse-react';
```

## TypeScript

Full TypeScript support out of the box:

```tsx
import type { IconProps } from '@plusuidesign/iconiverse-react';
import { HeartFilled } from '@plusuidesign/iconiverse-react';

const CustomIcon: React.FC<IconProps> = (props) => {
  return <HeartFilled {...props} />;
};
```

## Next.js

Works seamlessly with Next.js 13+ (App Router and Pages Router):

```tsx
// app/page.tsx
import { StarFilled } from '@plusuidesign/iconiverse-react';

export default function Page() {
  return <StarFilled size={32} />;
}
```

## Creating Custom Icons

You can create custom icon components using the `createIcon` helper:

```tsx
import { createIcon } from '@plusuidesign/iconiverse-react';

const CustomIcon = createIcon(
  'CustomIcon',
  [
    ['path', { d: 'M10 10 L20 20', stroke: 'currentColor' }],
    ['circle', { cx: '15', cy: '15', r: '5', fill: 'currentColor' }],
  ]
);
```

## Performance Tips

1. **Import only what you need** - Leverage tree-shaking
2. **Use CSS classes** - Prefer `className` over inline styles
3. **Memoize when needed** - Use `React.memo` for frequently re-rendered icons
4. **Lazy load large sets** - Consider dynamic imports for icon pickers

```tsx
// Lazy loading example
const iconModules = {
  heart: () => import('@plusuidesign/iconiverse-react').then(m => m.HeartFilled),
  star: () => import('@plusuidesign/iconiverse-react').then(m => m.StarFilled),
};
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- React 16.8+ (Hooks support required)

## Contributing

This is part of the Iconiverse icon library project. For issues, feature requests, or contributions, please visit our GitHub repository.

## License

MIT © PlusUI Design

## Related Packages

- `@plusuidesign/iconiverse-core` - Core icon data (for building other framework integrations)

---

**Made with ❤️ by [Plus UI Design](https://www.plusuidesign.com/)**