hyperfusion-icons/USAGE.md

The ultimate collection of 3000+ modern React SVG icons with smart dynamic color and size support for brand logos, UI elements, and business icons

# Hyperfusion Icons Usage Guide

## Dynamic Icon System

Hyperfusion Icons now features a smart dynamic system that handles colored and colorless icons differently:

### Colorless Icons (Support Dynamic Colors & Sizes)

These icons can be customized with both color and size props:

```jsx
import { NameAddTypeRounded, NameArrowUpTypeSharp } from 'hyperfusion-icons';

// Default usage
<NameAddTypeRounded />

// Custom color
<NameAddTypeRounded color="#e74c3c" />

// Custom size
<NameAddTypeRounded size={32} />

// Both color and size
<NameAddTypeRounded color="#3498db" size={48} />
```

**Props for Colorless Icons:**
- `size?: number | string` - Icon size (default: 24)
- `color?: string` - Icon color (default: 'currentColor')
- `className?: string` - CSS class name
- `style?: React.CSSProperties` - Inline styles
- `...rest` - Any other SVG props

### Colored Icons (Only Support Dynamic Sizes)

These icons have predefined colors (like brand logos, gradients) and only support size customization:

```jsx
import { Name500pxTypeCircleColorTypeMulticolour, Analytics } from 'hyperfusion-icons';

// Default usage
<Name500pxTypeCircleColorTypeMulticolour />

// Custom size (color prop is ignored)
<Name500pxTypeCircleColorTypeMulticolour size={48} />

// Gradient icons
<Analytics size={64} />
```

**Props for Colored Icons:**
- `size?: number | string` - Icon size (default: 24)
- `className?: string` - CSS class name
- `style?: React.CSSProperties` - Inline styles
- `...rest` - Any other SVG props

**Note:** The `color` prop is ignored for colored icons to preserve their original appearance.

## Icon Categories

### Colorless Icons
- UI icons (arrows, buttons, navigation)
- Simple monochrome icons
- Icons with `black`, `white`, or single color variants

### Colored Icons
- Brand logos with `multicolour` in filename
- Icons with gradients or multiple predefined colors
- Complex illustrations with specific color schemes

## TypeScript Support

The package includes full TypeScript definitions:

```typescript
import { IconProps, IconPropsColored } from 'hyperfusion-icons';

// For colorless icons
const MyComponent: React.FC<{ icon: React.ComponentType<IconProps> }> = ({ icon: Icon }) => (
  <Icon color="#333" size={24} />
);

// For colored icons
const MyBrandComponent: React.FC<{ icon: React.ComponentType<IconPropsColored> }> = ({ icon: Icon }) => (
  <Icon size={32} />
);
```

## Migration from v2.x

If you were using raw SVG strings before:

```jsx
// Old way (v2.x)
<div dangerouslySetInnerHTML={{ __html: Analytics }} />

// New way (v3.x)
<Analytics size={24} />
```

The new system provides better React integration, TypeScript support, and automatic color/size management.