npm package: @icon-craft/react
Description: TypeScript-enabled React icon library – 3000+ beautiful SVG icons with full type safety
Author: Krish Patel
Latest version: 2.0.0

# @icon-craft/react

<div align="center">

![Icon-Craft React Banner](https://img.shields.io/badge/Icon--Craft-React-61dafb?style=for-the-badge&logo=react&logoColor=white)

**TypeScript-enabled React icon library — 3000+ beautiful SVG icons with full type safety**

This repository (**icon-craft-react**) contains the **React implementation** of Icon-Craft.  
For the **Vanilla JavaScript version**, see the **icon-craft** repository.

[![npm version](https://img.shields.io/npm/v/@icon-craft/react.svg?style=flat-square)](https://www.npmjs.com/package/@icon-craft/react)
[![npm downloads](https://img.shields.io/npm/dm/@icon-craft/react.svg?style=flat-square)](https://www.npmjs.com/package/@icon-craft/react)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@icon-craft/react?style=flat-square)](https://bundlephobia.com/package/@icon-craft/react)
[![license](https://img.shields.io/npm/l/@icon-craft/react.svg?style=flat-square)](https://github.com/PATEL-KRISH-0/icon-craft-react/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)

**3000+ icons** · **React + TypeScript** · **Tree-shakeable** · **Zero dependencies** · **Fully customizable**

[📦 Installation](#-installation) ·
[🚀 Quick Start](#-quick-start) ·
[📖 Documentation](#-documentation) ·
[💡 Examples](#-examples) ·
[🔧 API Reference](#-api-reference)

</div>


---

## ✨ Highlights

- 🎨 **3000+ Premium Icons** - Unified collection from Feather Icons and Remix Icon
- ⚛️ **Pure React Components** - Native JSX/TSX components with forwardRef support
- 🎯 **Dual Usage Patterns** - Dynamic `<Ico name="..."/>` or direct `<IcoHome/>`
- 📘 **Full TypeScript Support** - Complete type definitions and IntelliSense
- 🎨 **Extensive Customization** - Size, color, stroke, fill, rotation, flip, padding, opacity
- 📦 **Tree-Shakeable** - Only bundle the icons you use (2-5KB per icon)
- 🚀 **Zero Dependencies** - Only requires React as peer dependency
- ♿ **Accessible** - Built-in ARIA support with title and aria-label props
- 🎭 **Advanced Transformations** - Rotate, flip, scale with padding
- 🔧 **Framework Ready** - Works with Next.js, Vite, CRA, Remix, Gatsby
- 🌳 **Production Ready** - Battle-tested, optimized, actively maintained

---

## 📦 Installation

```bash
# npm
npm install @icon-craft/react

# yarn
yarn add @icon-craft/react

# pnpm
pnpm add @icon-craft/react

# bun
bun add @icon-craft/react
```

**Peer Dependencies:**
- React >= 16.8.0
- React-DOM >= 16.8.0

---

## 🚀 Quick Start

### Method 1: Dynamic Icon Component (Ico)

Perfect for rendering icons dynamically based on user input, state, or configuration.

```jsx
import { Ico } from '@icon-craft/react';

function App() {
  return (
    <div>
      <Ico name="IcoHome" size={24} />
      <Ico name="IcoHeart" size={32} color="red" />
      <Ico name="IcoSearch" size={24} color="#0066cc" />
    </div>
  );
}
```

### Method 2: Direct Icon Components

Best for static icons and maximum tree-shaking optimization.

```jsx
import { IcoHome, IcoHeart, IcoSearch } from '@icon-craft/react';

function App() {
  return (
    <div>
      <IcoHome size={24} />
      <IcoHeart size={32} color="red" />
      <IcoSearch size={24} color="#0066cc" />
    </div>
  );
}
```

### TypeScript

Full TypeScript support with complete type definitions and IntelliSense:

```tsx
import { Ico, IcoHome, IcoProps, IconComponentProps, IconName } from '@icon-craft/react';

interface ButtonProps {
  icon: IconName; // Type-safe icon names
  label: string;
}

function IconButton({ icon, label }: ButtonProps) {
  return (
    <button>
      <Ico name={icon} size={20} />
      {label}
    </button>
  );
}

// With type-safe props
const MyComponent = () => {
  const iconProps: IconComponentProps = {
    size: 24,
    color: '#333',
    strokeWidth: 2
  };
  
  return <IcoHome {...iconProps} />;
};
```

#### TypeScript Types

**Core Types:**

```typescript
// Union type of all 3000+ icon names (kebab-case)
type IconName = '24-hours-fill' | '24-hours-line' | '4k-fill' | 'home' | 
                'heart' | 'search' | 'arrow-right' | ... // 3000+ more

// Props for the dynamic <Ico> component
interface IcoProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'fill'> {
  name: IconName;              // Required: icon name
  size?: number | string;      // Icon size (default: 24)
  color?: string;              // Stroke color (default: 'currentColor')
  strokeWidth?: number;        // Stroke width (default: 2)
  fill?: boolean;              // Enable fill (default: varies by icon)
  fillColor?: string;          // Fill color (default: 'currentColor')
  opacity?: number;            // Opacity 0-1 (default: 1)
  lineCap?: 'butt' | 'round' | 'square';    // Stroke line cap
  lineJoin?: 'miter' | 'round' | 'bevel';   // Stroke line join
  rotate?: number;             // Rotation in degrees 0-360
  flipX?: boolean;             // Flip horizontally
  flipY?: boolean;             // Flip vertically
  padding?: number;            // Inner padding in pixels
  className?: string;          // Additional CSS classes
  style?: CSSProperties;       // Inline styles
  title?: string;              // Accessible title
  'aria-label'?: string;       // ARIA label for accessibility
}

// Props for individual icon components (without name prop)
interface IconComponentProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  fill?: boolean;
  fillColor?: string;
  opacity?: number;
  lineCap?: 'butt' | 'round' | 'square';
  lineJoin?: 'miter' | 'round' | 'bevel';
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
  padding?: number;
  className?: string;
  style?: CSSProperties;
  title?: string;
  'aria-label'?: string;
}

// Icon metadata structure
interface IconMetadata {
  name: IconName;              // Kebab-case name
  componentName: string;       // PascalCase component name
  displayName: string;         // Human-readable name
  style: IconStyle;            // 'outline' | 'filled' | 'duotone'
  category: IconCategory;      // Icon category
  viewBox: string;             // SVG viewBox
  hasFill: boolean;           // Has fill variant
  hasStroke: boolean;         // Has stroke variant
  variants?: string[];        // Available variants
}
```

**Utility Functions:**

```typescript
// Validate if a string is a valid icon name
function isValidIconName(name: string): boolean;

// Get metadata for an icon
function getIconMetadata(name: IconName): IconMetadata | null;

// Get all icons in a category
function getIconsByCategory(category: IconCategory): IconName[];

// Get all icons of a specific style
function getIconsByStyle(style: IconStyle): IconName[];

// Search icons by query
function searchIcons(query: string): IconName[];

// Get all available categories
function getCategories(): IconCategory[];

// Get component name from icon name
function getComponentName(name: IconName): string;

// Export arrays
const iconNames: IconName[];                           // All icon names
const iconMetadata: Record<IconName, IconMetadata>;    // Metadata map
```

**Usage Examples:**

```tsx
// Type-safe icon selection
const renderIcon = (iconName: IconName) => {
  return <Ico name={iconName} size={24} />;
};

// With metadata
import { getIconMetadata, IconName } from '@icon-craft/react';

const iconName: IconName = 'home';
const metadata = getIconMetadata(iconName);
console.log(metadata?.category); // 'UI/Navigation'

// Type-safe props spreading
import { IconComponentProps } from '@icon-craft/react';

const iconConfig: IconComponentProps = {
  size: 32,
  color: 'blue',
  strokeWidth: 1.5,
  rotate: 45
};

<IcoHome {...iconConfig} />
```

---

## 📖 Documentation

### Icon Component Props

All icons accept standard SVG attributes plus these powerful customization props:

#### Basic Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Icon width and height in pixels |
| `color` | `string` | `'currentColor'` | Stroke/outline color (any CSS color) |
| `strokeWidth` | `number` | `2` | Stroke width for outline icons (0.5 - 5) |
| `fill` | `boolean` | varies* | Enable fill for the icon |
| `fillColor` | `string` | `'currentColor'` | Fill color when fill is enabled |
| `opacity` | `number` | `1` | Icon opacity (0 - 1) |

*Default fill varies by icon style: `false` for outline icons, `true` for filled icons

#### Styling Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `lineCap` | `'butt' \| 'round' \| 'square'` | `'round'` | Shape at the end of strokes |
| `lineJoin` | `'miter' \| 'round' \| 'bevel'` | `'round'` | Shape at the corners of strokes |
| `className` | `string` | `''` | Additional CSS classes |
| `style` | `CSSProperties` | - | Inline styles object |

#### Transformation Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `rotate` | `number` | `0` | Rotation angle in degrees (0-360) |
| `flipX` | `boolean` | `false` | Flip horizontally |
| `flipY` | `boolean` | `false` | Flip vertically |
| `padding` | `number` | `0` | Inner padding in pixels |

#### Accessibility Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | - | Accessible title (creates `<title>` element) |
| `aria-label` | `string` | - | ARIA label for screen readers |

#### Additional Props

| Prop | Type | Description |
|------|------|-------------|
| `ref` | `React.Ref<SVGSVGElement>` | Forward ref to the SVG element |
| `...props` | `SVGAttributes<SVGSVGElement>` | Any valid SVG attributes (onClick, onMouseEnter, etc.) |

### Ico Component (Dynamic Icon)

The `<Ico>` component accepts an additional required prop:

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `name` | `IconName` (string) | ✅ Yes | Component name in PascalCase (e.g., "IcoHome", "IcoHeart") |

**Important:** Use the full component name including the "Ico" prefix:
- ✅ `<Ico name="IcoHome" />` - Correct
- ✅ `<Ico name="IcoTrash" />` - Correct  
- ❌ `<Ico name="home" />` - Incorrect
- ❌ `<Ico name="ico-home" />` - Incorrect

---

## 💡 Usage Examples

### Basic Usage

```jsx
import { Ico, IcoHome, IcoHeart, IcoStar } from '@icon-craft/react';

function BasicExamples() {
  return (
    <div>
      {/* Simple icon */}
      <IcoHome />
      
      {/* Custom size */}
      <IcoHeart size={48} />
      
      {/* Custom color */}
      <IcoStar color="gold" />
      
      {/* Dynamic icon */}
      <Ico name="IcoSearch" size={24} />
      
      {/* With stroke width (for outline icons) */}
      <Ico name="IcoCircle" strokeWidth={3} />
      
      {/* With fill enabled */}
      <IcoHeart fill={true} fillColor="red" />
      
      {/* With CSS classes */}
      <IcoSearch className="my-custom-class" />
      
      {/* With inline styles */}
      <IcoSettings style={{ marginRight: '10px' }} />
    </div>
  );
}
```

### Transformations

```jsx
import { IcoArrowRight, IcoHeart, IcoStar } from '@icon-craft/react';

function TransformationExamples() {
  return (
    <div>
      {/* Rotate */}
      <IcoArrowRight rotate={90} />  {/* Points down */}
      <IcoArrowRight rotate={180} /> {/* Points left */}
      <IcoArrowRight rotate={270} /> {/* Points up */}
      
      {/* Flip */}
      <IcoHeart flipX={true} />
      <IcoHeart flipY={true} />
      <IcoHeart flipX={true} flipY={true} />
      
      {/* Padding (adds internal padding) */}
      <IcoStar size={48} padding={8} />
      
      {/* Opacity */}
      <IcoHeart opacity={0.5} />
      
      {/* Combined transformations */}
      <IcoArrowRight rotate={45} size={32} color="#3b82f6" />
    </div>
  );
}
```

### Interactive Icon Button

```jsx
import { useState } from 'react';
import { IcoHeart } from '@icon-craft/react';

function FavoriteButton({ itemId }) {
  const [isFavorite, setIsFavorite] = useState(false);

  return (
    <button
      onClick={() => setIsFavorite(!isFavorite)}
      style={{
        background: 'transparent',
        border: 'none',
        cursor: 'pointer',
        padding: '8px',
        borderRadius: '50%',
        transition: 'transform 0.2s'
      }}
    >
      <IcoHeart
        size={32}
        color={isFavorite ? '#ff4444' : '#cccccc'}
        fill={isFavorite}
        fillColor={isFavorite ? '#ff4444' : 'none'}
        style={{
          transition: 'all 0.3s ease'
        }}
      />
    </button>
  );
}
```

### Dynamic Icon Button Component

```jsx
import { Ico } from '@icon-craft/react';

function IconButton({ icon, label, onClick, variant = 'primary' }) {
  const styles = {
    primary: { background: '#007bff', color: 'white' },
    secondary: { background: '#6c757d', color: 'white' },
    danger: { background: '#dc3545', color: 'white' }
  };

  return (
    <button
      onClick={onClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '16px',
        fontWeight: '500',
        ...styles[variant]
      }}
    >
      <Ico name={icon} size={20} />
      {label}
    </button>
  );
}

// Usage
function App() {
  return (
    <div>
      <IconButton icon="IcoDownload" label="Download" onClick={() => {}} />
      <IconButton icon="IcoShare" label="Share" variant="secondary" onClick={() => {}} />
      <IconButton icon="IcoTrash" label="Delete" variant="danger" onClick={() => {}} />
    </div>
  );
}
```

### Navigation Menu

```jsx
import { IcoHome, IcoUser, IcoSettings, IcoBell, IcoMail } from '@icon-craft/react';

function Navigation() {
  const menuItems = [
    { icon: IcoHome, label: 'Home', path: '/' },
    { icon: IcoMail, label: 'Messages', path: '/messages' },
    { icon: IcoBell, label: 'Notifications', path: '/notifications' },
    { icon: IcoUser, label: 'Profile', path: '/profile' },
    { icon: IcoSettings, label: 'Settings', path: '/settings' }
  ];

  return (
    <nav>
      {menuItems.map(({ icon: Icon, label, path }) => (
        <a key={path} href={path}>
          <Icon size={20} />
          <span>{label}</span>
        </a>
      ))}
    </nav>
  );
}
```

### Icon Mapping from Data

```jsx
import { Ico } from '@icon-craft/react';

function StatusList({ items }) {
  const statusIcons = {
    success: 'IcoCheckCircleFill',
    warning: 'IcoAlertFill',
    error: 'IcoCloseCircleFill',
    pending: 'IcoLoader'
  };

  const statusColors = {
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
    pending: '#6b7280'
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          <Ico
            name={statusIcons[item.status]}
            size={20}
            color={statusColors[item.status]}
          />
          <span>{item.message}</span>
        </li>
      ))}
    </ul>
  );
}
```

### Loading Spinner

```jsx
import { IcoLoader } from '@icon-craft/react';

function LoadingSpinner({ size = 24, color = '#3b82f6' }) {
  return (
    <IcoLoader
      size={size}
      color={color}
      style={{
        animation: 'spin 1s linear infinite'
      }}
    />
  );
}

// Add CSS for spin animation
const styles = `
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
`;
```

### Hover Effects

```jsx
import { useState } from 'react';
import { IcoStar } from '@icon-craft/react';

function RatingStars({ rating, onChange }) {
  const [hoveredStar, setHoveredStar] = useState(null);

  return (
    <div style={{ display: 'flex', gap: '4px' }}>
      {[1, 2, 3, 4, 5].map((star) => (
        <IcoStar
          key={star}
          size={32}
          fill={star <= (hoveredStar || rating)}
          fillColor={star <= (hoveredStar || rating) ? '#fbbf24' : '#d1d5db'}
          color={star <= (hoveredStar || rating) ? '#fbbf24' : '#d1d5db'}
          onMouseEnter={() => setHoveredStar(star)}
          onMouseLeave={() => setHoveredStar(null)}
          onClick={() => onChange(star)}
          style={{ cursor: 'pointer', transition: 'all 0.2s' }}
        />
      ))}
    </div>
  );
}
```

### With Accessibility

```jsx
import { IcoDownload, IcoShare, IcoTrash } from '@icon-craft/react';

function AccessibleActions({ onDownload, onShare, onDelete }) {
  return (
    <div role="toolbar" aria-label="Actions">
      <button onClick={onDownload} aria-label="Download file">
        <IcoDownload size={20} title="Download" />
      </button>
      
      <button onClick={onShare} aria-label="Share file">
        <IcoShare size={20} title="Share" />
      </button>
      
      <button onClick={onDelete} aria-label="Delete file">
        <IcoTrash size={20} title="Delete" />
      </button>
    </div>
  );
}
```

### Using Refs

```jsx
import { useRef, useEffect } from 'react';
import { IcoHome } from '@icon-craft/react';

function IconWithRef() {
  const iconRef = useRef(null);

  useEffect(() => {
    if (iconRef.current) {
      console.log('Icon dimensions:', {
        width: iconRef.current.clientWidth,
        height: iconRef.current.clientHeight
      });
    }
  }, []);

  return <IcoHome ref={iconRef} size={48} />;
}
```

---

## 🔧 API Reference

### Exported Components

```typescript
// Dynamic icon component
export const Ico: React.FC<IcoProps>;

// All icon components (3000+)
export const IcoHome: React.FC<IconProps>;
export const IcoHeart: React.FC<IconProps>;
export const IcoSearch: React.FC<IconProps>;
// ... and 3000+ more

// Utility functions
export const iconNames: string[];
export function searchIcons(query: string): string[];
export function getIconsByCategory(category: string): string[];
```

### TypeScript Interfaces

```typescript
interface IconProps extends SVGAttributes<SVGSVGElement> {
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  fill?: boolean;
  fillColor?: string;
  opacity?: number;
  lineCap?: 'butt' | 'round' | 'square';
  lineJoin?: 'miter' | 'round' | 'bevel';
  rotate?: number;
  flipX?: boolean;
  flipY?: boolean;
  padding?: number;
  title?: string;
  'aria-label'?: string;
  className?: string;
  style?: React.CSSProperties;
}

interface IcoProps extends IconProps {
  name: IconName; // Component name in PascalCase
}

type IconName = 'IcoHome' | 'IcoHeart' | 'IcoSearch' | /* ... 3000+ more */;
```

### Utility Functions

```jsx
import { iconNames, searchIcons, getIconsByCategory } from '@icon-craft/react';

// Get all icon names
console.log(iconNames); 
// ['IcoHome', 'IcoHeart', 'IcoSearch', ...]

// Search for icons
const heartIcons = searchIcons('heart');
// ['IcoHeart', 'IcoHeartFill', 'IcoHeartLine', ...]

// Get icons by category
const uiIcons = getIconsByCategory('ui');
// ['IcoHome', 'IcoMenu', 'IcoSettings', ...]
```

---

## 🔌 Framework Integration

### Next.js (App Router)

```jsx
// app/page.jsx
import { Ico, IcoHome } from '@icon-craft/react';

export default function Home() {
  return (
    <div>
      <IcoHome size={32} />
      <Ico name="IcoSearch" size={24} />
    </div>
  );
}
```

### Next.js (Pages Router)

```jsx
// pages/index.jsx
import { IcoHome } from '@icon-craft/react';

export default function Home() {
  return <IcoHome size={24} />;
}
```

### Vite

```jsx
// src/App.jsx
import { IcoHome, IcoHeart } from '@icon-craft/react';

function App() {
  return (
    <div>
      <IcoHome />
      <IcoHeart />
    </div>
  );
}

export default App;
```

### Create React App

```jsx
// src/App.js
import { Ico } from '@icon-craft/react';

function App() {
  return <Ico name="IcoHome" size={24} />;
}

export default App;
```

### Remix

```jsx
// app/routes/index.jsx
import { Ico } from '@icon-craft/react';

export default function Index() {
  return <Ico name="IcoHome" size={24} />;
}
```

### Gatsby

```jsx
// src/pages/index.js
import { IcoHome } from '@icon-craft/react';

const IndexPage = () => {
  return (
    <main>
      <IcoHome size={32} />
    </main>
  );
};

export default IndexPage;
```

---

## 🌍 Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Opera (latest)
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)

**Requirements:**
- Modern browsers with SVG support
- React 16.8+ (Hooks support)

---

## 🤔 FAQ

### How is this different from react-icons?

| Feature | @icon-craft/react | react-icons |
|---------|------------------|-------------|
| **Icons** | 3000+ (Feather + Remix unified) | 40,000+ (multiple libraries) |
| **TypeScript** | Full native support | Community types |
| **Customization** | Extensive (rotate, flip, padding, etc.) | Basic props |
| **Bundle Size** | Optimized, tree-shakeable | Larger bundle |
| **Focus** | Curated, unified design | Comprehensive variety |
| **Transformations** | Built-in (rotate, flip, scale) | Manual CSS required |
| **Dynamic Component** | `<Ico name="..." />` | Not available |

### Can I use this with Next.js?

**Yes!** Icon-Craft works perfectly with Next.js (both App Router and Pages Router):

```jsx
// app/page.jsx (Next.js 13+ App Router)
import { Ico } from '@icon-craft/react';

export default function Home() {
  return <Ico name="IcoHome" size={32} />;
}
```

### How do I find available icons?

```jsx
import { iconNames, searchIcons } from '@icon-craft/react';

// Get all icon component names
console.log(iconNames); // ['IcoHome', 'IcoHeart', 'IcoSearch', ...]

// Search for specific icons
const heartIcons = searchIcons('heart');
console.log(heartIcons); // All icons with 'heart' in the name

// Filter by category
import { getIconsByCategory } from '@icon-craft/react';
const uiIcons = getIconsByCategory('ui');
```

Or visit the [Icon Browser](https://patel-krish-0.github.io/icon-craft/browse.html) for visual search.

### How do I make icons clickable?

Simply add an `onClick` handler:

```jsx
<Ico 
  name="IcoTrash" 
  onClick={() => handleDelete()} 
  style={{ cursor: 'pointer' }}
/>
```

### Can I animate icons?

Yes! Use CSS or inline styles:

```jsx
<Ico 
  name="IcoLoader" 
  style={{
    animation: 'spin 1s linear infinite'
  }}
/>

// Or use the rotate prop for static rotation
<IcoArrowRight rotate={90} /> // Points down
```

### How do I change icon color on hover?

Using CSS:

```jsx
<Ico 
  name="IcoHeart"
  className="hover-icon"
/>

// CSS
.hover-icon:hover {
  color: red;
  transition: color 0.3s;
}
```

Or using state:

```jsx
const [hovered, setHovered] = useState(false);

<IcoHeart
  color={hovered ? 'red' : '#cccccc'}
  onMouseEnter={() => setHovered(true)}
  onMouseLeave={() => setHovered(false)}
/>
```

### Does this support SSR (Server-Side Rendering)?

**Yes!** Icon-Craft is fully compatible with SSR frameworks like Next.js, Remix, and Gatsby.

### Can I use this in a commercial project?

**Yes!** Icon-Craft is MIT licensed. Both Feather Icons (MIT) and Remix Icon (Apache 2.0) allow commercial use.

### How do I use refs with icons?

All icon components support `forwardRef`:

```jsx
import { useRef } from 'react';
import { IcoHome } from '@icon-craft/react';

function MyComponent() {
  const iconRef = useRef(null);
  
  return <IcoHome ref={iconRef} />;
}
```

### What's the difference between fill and filled icons?

- **fill prop**: Controls whether the icon is filled (works on any icon)
- **Filled icons** (e.g., `IcoHomeFill`): Icons designed with solid fills by default
- You can use `fill={false}` on filled icons to show just the outline

### How do I reduce bundle size?

Use direct imports instead of the `Ico` component for better tree-shaking:

```jsx
// Better for bundle size (tree-shakeable)
import { IcoHome, IcoHeart } from '@icon-craft/react';

// Includes the icon registry (larger bundle)
import { Ico } from '@icon-craft/react';
```

---

## 🔄 Migration Guide

### From react-icons

```jsx
// Before (react-icons)
import { FaHome, FaHeart } from 'react-icons/fa';
<FaHome size={24} color="blue" />

// After (icon-craft)
import { IcoHome, IcoHeart } from '@icon-craft/react';
<IcoHome size={24} color="blue" />
```

### From Feather Icons (react-feather)

```jsx
// Before (react-feather)
import { Home, Heart } from 'react-feather';
<Home size={24} color="blue" strokeWidth={2} />

// After (icon-craft)
import { IcoHome, IcoHeart } from '@icon-craft/react';
<IcoHome size={24} color="blue" strokeWidth={2} />
```

### From @remixicon/react

```jsx
// Before (@remixicon/react)
import { RiHomeLine, RiHeartFill } from '@remixicon/react';
<RiHomeLine size={24} />

// After (icon-craft)
import { IcoHome, IcoHeartFill } from '@icon-craft/react';
<IcoHome size={24} />
```

---

## 📊 Performance

### Bundle Size Optimization

- **Tree-Shaking**: Only icons you import are bundled
- **No Dependencies**: Zero runtime dependencies except React
- **Optimized SVG**: Minimal SVG markup for each icon
- **Component Size**: ~2-5KB per icon component

### Best Practices

```jsx
// ✅ Good - Tree-shakeable
import { IcoHome, IcoHeart } from '@icon-craft/react';

// ⚠️ Okay - Includes icon registry
import { Ico } from '@icon-craft/react';

// ❌ Avoid - Don't import everything
import * as Icons from '@icon-craft/react';
```

---

## ⚖️ License & Attribution

### License

This library is **MIT licensed**. See the [LICENSE](https://github.com/PATEL-KRISH-0/icon-craft-react/blob/main/LICENSE) file for complete details.

### Icon Sources

Icon-Craft combines and transforms icons from two excellent open-source projects:

#### **Feather Icons** — MIT License
- Source: https://feathericons.com
- Repository: https://github.com/feathericons/feather
- License: MIT (allows modification and redistribution)
- Copyright © Cole Bemis

#### **Remix Icon** — Apache License 2.0
- Source: https://remixicon.com
- Repository: https://github.com/Remix-Design/RemixIcon
- License: Apache 2.0 (allows modification and redistribution)
- Copyright © Remix Design

Both licenses **explicitly permit** modification, redistribution, and commercial use.

---

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

### How to Contribute

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

### Development Setup

```bash
# Clone the repo
git clone https://github.com/PATEL-KRISH-0/icon-craft-react.git
cd icon-craft/packages/react

# Install dependencies
npm install

# Generate icon components
npm run generate

# Build the package
npm run build

# Run type checking
npm run typecheck
```

### Reporting Issues

Found a bug or have a suggestion? [Open an issue](https://github.com/PATEL-KRISH-0/icon-craft-react/issues)

---

## 📊 Links

- 📦 [NPM Package](https://www.npmjs.com/package/@icon-craft/react)
- 🐙 [GitHub Repository](https://github.com/PATEL-KRISH-0/icon-craft-react)
- 🎨 [Icon Browser](https://patel-krish-0.github.io/icon-craft-website/browse.html)
- 🌐 [Icon Font CDN Version](https://github.com/PATEL-KRISH-0/icon-craft-react)
- 🐛 [Report Issues](https://github.com/PATEL-KRISH-0/icon-craft-react/issues)
- 💬 [Discussions](https://github.com/PATEL-KRISH-0/icon-craft-react/discussions)

---

## 🙏 Credits

- **Feather Icons** - [feathericons.com](https://feathericons.com/)
- **Remix Icon** - [remixicon.com](https://remixicon.com/)
- **Built with ❤️ by [Krish Patel](https://github.com/PATEL-KRISH-0)**

---

## 📄 Package Info

```json
{
  "name": "@icon-craft/react",
  "version": "2.0.0",
  "description": "TypeScript-enabled React icon library — 3000+ beautiful SVG icons",
  "author": "Krish Patel",
  "license": "ISC",
  "repository": "https://github.com/PATEL-KRISH-0/icon-craft",
  "keywords": [
    "react", "typescript", "icons", "svg", "icon-library",
    "feather", "remix", "ui", "components"
  ]
}
```

---

<div align="center">

**Made with ❤️ by [Krish Patel](https://github.com/PATEL-KRISH-0)**

If you find Icon-Craft useful, please consider giving it a ⭐️ on [GitHub](https://github.com/PATEL-KRISH-0/icon-craft)!

---

**[@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react)** · **[GitHub](https://github.com/PATEL-KRISH-0/icon-craft)** · **[CDN Version](https://github.com/PATEL-KRISH-0/icon-craft)** · **[Website](https://patel-krish-0.github.io/icon-craft)**

</div>