@icongen/react/README.md

React component for IconGen Pro icons

# @icongen/react

React component for seamlessly integrating your IconGen Pro icons into React applications.

## Installation

```bash
npm install @icongen/react
# or
yarn add @icongen/react
```

## Quick Start

```jsx
import { IconGenIcon } from '@icongen/react';

function App() {
  return (
    <div>
      <IconGenIcon 
        icon="home" 
        userId="your-user-id" 
        size="lg" 
      />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | `string` | **required** | Icon name as it appears in your IconGen library |
| `userId` | `string` | **required** | Your IconGen user ID |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2x' \| '3x' \| number \| string` | `'md'` | Icon size preset or custom size |
| `className` | `string` | `''` | Custom CSS class name |
| `style` | `CSSProperties` | `{}` | Custom inline styles |
| `alt` | `string` | `icon` | Alt text for accessibility |
| `fallback` | `ReactNode` | `null` | Loading placeholder component |
| `errorFallback` | `ReactNode` | `null` | Error placeholder component |
| `onLoad` | `() => void` | `undefined` | Callback when icon loads successfully |
| `onError` | `(error: Error) => void` | `undefined` | Callback when icon fails to load |
| `baseUrl` | `string` | `'https://icongen.pro'` | Base URL for IconGen API |

## Size Presets

- `xs`: 12px
- `sm`: 16px  
- `md`: 20px (default)
- `lg`: 24px
- `xl`: 32px
- `2x`: 48px
- `3x`: 64px

You can also use custom sizes:
```jsx
<IconGenIcon icon="star" userId="your-id" size={28} />
<IconGenIcon icon="star" userId="your-id" size="2rem" />
```

## Examples

### Basic Usage
```jsx
<IconGenIcon icon="home" userId="your-user-id" />
```

### With Custom Size and Styling
```jsx
<IconGenIcon 
  icon="search" 
  userId="your-user-id"
  size="lg"
  className="my-icon"
  style={{ color: '#007bff' }}
/>
```

### With Loading and Error Handling
```jsx
<IconGenIcon 
  icon="profile" 
  userId="your-user-id"
  fallback={<div>Loading...</div>}
  errorFallback={<div>❌ Failed to load</div>}
  onLoad={() => console.log('Icon loaded!')}
  onError={(error) => console.error('Icon error:', error)}
/>
```

### Self-hosted IconGen
```jsx
<IconGenIcon 
  icon="logo" 
  userId="your-user-id"
  baseUrl="https://your-icongen-instance.com"
/>
```

## Utility Functions

### generateIconClassName
Generate CSS class name for an icon:
```jsx
import { generateIconClassName } from '@icongen/react';

const className = generateIconClassName('My Icon Name'); // 'icon-my-icon-name'
```

### getIconApiUrl
Get direct API URL for an icon:
```jsx
import { getIconApiUrl } from '@icongen/react';

const url = getIconApiUrl('user-id', 'icon-name'); 
// 'https://icongen.pro/api/icons/user-id/icon-name'
```

### getCssLibraryUrl
Get CSS library URL for a user:
```jsx
import { getCssLibraryUrl } from '@icongen/react';

const cssUrl = getCssLibraryUrl('user-id');
// 'https://icongen.pro/api/css/user-id/icons.css'
```

## TypeScript Support

This package includes full TypeScript definitions. All props are properly typed for the best development experience.

## License

MIT © IconGen Pro