@icon-craft/react-ts 1.0.0

package/README.md

@@ -0,0 +1,1018 @@
+# @icon-craft/react-ts
+
+<div align="center">
+
+![Icon-Craft Banner](https://img.shields.io/badge/Icon--Craft-React%20TypeScript-3178c6?style=for-the-badge&logo=typescript&logoColor=white)
+
+**A comprehensive TypeScript-first React icon library with 3475+ beautifully crafted SVG icons**
+
+[![npm version](https://img.shields.io/npm/v/@icon-craft/react-ts.svg?style=flat-square)](https://www.npmjs.com/package/@icon-craft/react-ts)
+[![npm downloads](https://img.shields.io/npm/dm/@icon-craft/react-ts.svg?style=flat-square)](https://www.npmjs.com/package/@icon-craft/react-ts)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@icon-craft/react-ts?style=flat-square)](https://bundlephobia.com/package/@icon-craft/react-ts)
+[![license](https://img.shields.io/npm/l/@icon-craft/react-ts.svg?style=flat-square)](https://github.com/PATEL-KRISH-0/icon-craft/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-3178c6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
+
+**3475+ icons** · **Full TypeScript support** · **Type-safe** · **IntelliSense autocomplete** · **Tree-shakeable** · **Zero dependencies**
+
+[Installation](#-installation) · [Quick Start](#-quick-start) · [TypeScript Features](#-typescript-features) · [Documentation](#-documentation) · [Examples](#-examples)
+
+</div>
+
+---
+
+## ✨ Features
+
+- 🎨 **3475+ Premium Icons** - Unified collection from Feather Icons and Remix Icon
+- 📘 **TypeScript First** - Built with TypeScript, includes complete type definitions
+- 🔒 **Type-Safe** - Catch errors at compile time, not runtime
+- 💡 **IntelliSense Support** - Full autocomplete for icon names and props in VS Code
+- ⚛️ **Pure React Components** - Native TSX/JSX components with proper types
+- 🎯 **Dual Usage Patterns** - Dynamic `<Icon name="..."/>` or direct `<IconHome/>`
+- 🎨 **Fully Customizable** - Control size, color, stroke width, className, and more
+- 📦 **Tree-Shakeable** - Only bundle the icons you actually use
+- 🚀 **Zero Dependencies** - Only requires React as peer dependency (23MB source, ~2-5KB per icon when bundled)
+- ♿ **Accessible** - Semantic SVG elements with proper ARIA support
+- 🔧 **Framework Agnostic** - Works with Next.js, Vite, Create React App, Remix, etc.
+- 🌳 **Production Ready** - Battle-tested, optimized, and maintained
+
+---
+
+## 📦 Installation
+
+```bash
+# NPM
+npm install @icon-craft/react-ts
+
+# Yarn
+yarn add @icon-craft/react-ts
+
+# PNPM
+pnpm add @icon-craft/react-ts
+```
+
+**Peer Dependencies:**
+- React >= 16.8.0
+- React-DOM >= 16.8.0
+
+**Recommended for TypeScript projects. For JavaScript-only projects, use [@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react).**
+
+---
+
+## 🚀 Quick Start
+
+### Method 1: Dynamic Icon Component
+
+Perfect for rendering icons dynamically with full type safety.
+
+```tsx
+import { Icon } from '@icon-craft/react-ts';
+
+function App() {
+  return (
+    <div>
+      <Icon name="home" size={24} />
+      <Icon name="heart" size={32} color="red" />
+      <Icon name="search" size={24} color="#0066cc" />
+    </div>
+  );
+}
+```
+
+### Method 2: Direct Icon Components
+
+Best for static icons with full TypeScript support and tree-shaking optimization.
+
+```tsx
+import { IconHome, IconHeart, IconSearch } from '@icon-craft/react-ts';
+
+function App() {
+  return (
+    <div>
+      <IconHome size={24} />
+      <IconHeart size={32} color="red" />
+      <IconSearch size={24} color="#0066cc" />
+    </div>
+  );
+}
+```
+
+---
+
+## 📘 TypeScript Features
+
+### Full Type Definitions
+
+All components come with complete TypeScript definitions:
+
+```tsx
+import { Icon, IconProps, IconComponentProps } from '@icon-craft/react-ts';
+
+// Icon component with full type safety
+const MyIcon: React.FC<IconProps> = (props) => {
+  return <Icon {...props} />;
+};
+
+// Custom icon wrapper with typed props
+interface CustomIconProps extends IconComponentProps {
+  tooltip?: string;
+  variant?: 'primary' | 'secondary';
+}
+
+const CustomIcon: React.FC<CustomIconProps> = ({ 
+  tooltip, 
+  variant = 'primary',
+  size = 24,
+  ...props 
+}) => {
+  const color = variant === 'primary' ? '#007bff' : '#6c757d';
+  
+  return (
+    <div title={tooltip}>
+      <Icon {...props} size={size} color={color} />
+    </div>
+  );
+};
+```
+
+### IntelliSense Autocomplete
+
+Get full autocomplete support in VS Code and other IDEs:
+
+```tsx
+import { Icon } from '@icon-craft/react-ts';
+
+// Type "Icon" and get autocomplete for all 3475+ icon names
+<Icon name="ho..." />
+//          ↑ Shows: home, hospital, hotel, hourglass, etc.
+
+// Get autocomplete for all props
+<Icon 
+  name="home"
+  size={...}     // number | string
+  color={...}    // string
+  strokeWidth={...} // number
+  className={...}   // string
+  style={...}       // React.CSSProperties
+  onClick={...}     // (event: React.MouseEvent) => void
+/>
+```
+
+### Type-Safe Icon Names
+
+```tsx
+import { iconNames, IconName } from '@icon-craft/react-ts';
+
+// IconName is a union type of all available icon names
+const myIcon: IconName = 'home'; // ✅ Valid
+const invalid: IconName = 'nonexistent'; // ❌ TypeScript error
+
+// Get all icon names as typed array
+const allIcons: string[] = iconNames;
+
+// Type-safe icon mapping
+const iconConfig: Record<IconName, { color: string; size: number }> = {
+  'home': { color: 'blue', size: 24 },
+  'heart': { color: 'red', size: 32 },
+  // TypeScript ensures you only use valid icon names
+};
+```
+
+### Strongly Typed Props
+
+```tsx
+import { Icon, IconHome } from '@icon-craft/react-ts';
+import { SVGProps } from 'react';
+
+// All icon props are fully typed
+interface MyComponentProps {
+  iconName: string; // Or use IconName type for stricter typing
+  iconSize?: number;
+  iconColor?: string;
+}
+
+const MyComponent: React.FC<MyComponentProps> = ({ 
+  iconName, 
+  iconSize = 24, 
+  iconColor = 'currentColor' 
+}) => {
+  return (
+    <Icon 
+      name={iconName}
+      size={iconSize}
+      color={iconColor}
+      // TypeScript knows all available props
+      onClick={(e) => console.log('Clicked')} // Fully typed event
+    />
+  );
+};
+
+// Direct components are also fully typed
+const TypedIcon: React.FC<{ size: number }> = ({ size }) => {
+  return (
+    <IconHome 
+      size={size}
+      // All SVG props are available and typed
+      aria-label="Home"
+      role="img"
+    />
+  );
+};
+```
+
+---
+
+## 📖 Documentation
+
+### Icon Component Props
+
+All icons accept standard SVG attributes plus these convenience props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | - | **Required** for `<Icon/>`. Icon identifier (e.g., "home", "heart") |
+| `size` | `number \| string` | `24` | Width and height in pixels |
+| `color` | `string` | `'currentColor'` | Icon color (any valid CSS color) |
+| `strokeWidth` | `number` | `2` | Stroke width for outline icons |
+| `className` | `string` | `''` | Additional CSS classes |
+| `style` | `React.CSSProperties` | - | Inline styles object |
+| `onClick` | `(e: React.MouseEvent) => void` | - | Click event handler |
+| `...props` | `SVGProps<SVGSVGElement>` | - | Any other valid SVG attributes |
+
+---
+
+## 💡 Usage Examples
+
+### Basic Usage
+
+```tsx
+import { Icon } from '@icon-craft/react-ts';
+
+// Simple icon
+<Icon name="home" />
+
+// Custom size
+<Icon name="heart" size={48} />
+
+// Custom color
+<Icon name="star" color="gold" />
+
+// With stroke width (for outline icons)
+<Icon name="circle" strokeWidth={3} />
+
+// With CSS classes
+<Icon name="search" className="my-custom-class" />
+
+// With inline styles
+<Icon name="settings" style={{ marginRight: '10px' }} />
+
+// With click handler (fully typed)
+<Icon 
+  name="menu" 
+  onClick={(e: React.MouseEvent<SVGSVGElement>) => {
+    console.log('Menu clicked!', e.currentTarget);
+  }} 
+/>
+```
+
+### Type-Safe Icon Button Component
+
+```tsx
+import { Icon, IconProps } from '@icon-craft/react-ts';
+import React from 'react';
+
+interface IconButtonProps {
+  icon: string;
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'danger';
+  size?: number;
+  disabled?: boolean;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({ 
+  icon, 
+  label, 
+  onClick,
+  variant = 'primary',
+  size = 20,
+  disabled = false
+}) => {
+  const colors = {
+    primary: '#007bff',
+    secondary: '#6c757d',
+    danger: '#dc3545'
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '8px',
+        background: disabled ? '#ccc' : colors[variant],
+        color: 'white',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        fontSize: '16px',
+        opacity: disabled ? 0.6 : 1
+      }}
+    >
+      <Icon name={icon} size={size} />
+      {label}
+    </button>
+  );
+};
+
+// Usage with full type safety
+<IconButton 
+  icon="download" 
+  label="Download" 
+  onClick={() => console.log('Download')}
+  variant="primary"
+/>
+<IconButton 
+  icon="trash" 
+  label="Delete" 
+  onClick={() => console.log('Delete')}
+  variant="danger"
+/>
+```
+
+### With Tailwind CSS + TypeScript
+
+```tsx
+import { Icon } from '@icon-craft/react-ts';
+import { FC } from 'react';
+
+const IconGallery: FC = () => {
+  return (
+    <div className="flex gap-4 p-8">
+      <Icon 
+        name="home" 
+        className="w-6 h-6 text-blue-500 hover:text-blue-700 transition-colors cursor-pointer" 
+      />
+      <Icon 
+        name="heart" 
+        className="w-8 h-8 text-red-500 hover:scale-110 transition-transform cursor-pointer" 
+      />
+      <Icon 
+        name="settings" 
+        className="w-5 h-5 text-gray-600 dark:text-gray-300" 
+      />
+    </div>
+  );
+};
+
+export default IconGallery;
+```
+
+### Interactive Favorite Button (Type-Safe)
+
+```tsx
+import { useState, FC } from 'react';
+import { Icon } from '@icon-craft/react-ts';
+
+interface FavoriteButtonProps {
+  itemId: string;
+  initialFavorite?: boolean;
+  onToggle?: (isFavorite: boolean) => void;
+}
+
+const FavoriteButton: FC<FavoriteButtonProps> = ({ 
+  itemId,
+  initialFavorite = false,
+  onToggle
+}) => {
+  const [isFavorite, setIsFavorite] = useState(initialFavorite);
+
+  const handleClick = () => {
+    const newState = !isFavorite;
+    setIsFavorite(newState);
+    onToggle?.(newState);
+  };
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{
+        background: 'transparent',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '8px',
+        borderRadius: '50%',
+        transition: 'transform 0.2s'
+      }}
+      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
+      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
+      aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+    >
+      <Icon
+        name="heart"
+        size={32}
+        color={isFavorite ? '#ff4444' : '#cccccc'}
+        style={{
+          fill: isFavorite ? '#ff4444' : 'none',
+          transition: 'all 0.3s ease'
+        }}
+      />
+    </button>
+  );
+};
+
+export default FavoriteButton;
+```
+
+### Type-Safe Navigation Bar
+
+```tsx
+import { Icon } from '@icon-craft/react-ts';
+import { FC } from 'react';
+
+interface NavItem {
+  icon: string;
+  label: string;
+  path: string;
+  badge?: number;
+}
+
+const navItems: NavItem[] = [
+  { icon: 'home', label: 'Home', path: '/' },
+  { icon: 'search', label: 'Search', path: '/search' },
+  { icon: 'bell', label: 'Notifications', path: '/notifications', badge: 3 },
+  { icon: 'user', label: 'Profile', path: '/profile' },
+  { icon: 'settings', label: 'Settings', path: '/settings' },
+];
+
+const Navbar: FC = () => {
+  return (
+    <nav style={{ display: 'flex', gap: '30px', padding: '20px' }}>
+      {navItems.map((item) => (
+        <a
+          key={item.path}
+          href={item.path}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '5px',
+            textDecoration: 'none',
+            color: '#333',
+            position: 'relative'
+          }}
+        >
+          <Icon name={item.icon} size={24} />
+          <span style={{ fontSize: '12px' }}>{item.label}</span>
+          {item.badge && (
+            <span style={{
+              position: 'absolute',
+              top: '-5px',
+              right: '-10px',
+              background: 'red',
+              color: 'white',
+              borderRadius: '50%',
+              width: '20px',
+              height: '20px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '10px'
+            }}>
+              {item.badge}
+            </span>
+          )}
+        </a>
+      ))}
+    </nav>
+  );
+};
+
+export default Navbar;
+```
+
+### Type-Safe Icon Gallery with Search
+
+```tsx
+import { useState, FC, ChangeEvent } from 'react';
+import { iconNames, Icon } from '@icon-craft/react-ts';
+
+const IconGallery: FC = () => {
+  const [search, setSearch] = useState<string>('');
+  const [selected, setSelected] = useState<string | null>(null);
+
+  const filteredIcons = iconNames.filter((name: string) =>
+    name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <input
+        type="text"
+        placeholder="Search icons..."
+        value={search}
+        onChange={handleSearchChange}
+        style={{
+          width: '100%',
+          maxWidth: '400px',
+          padding: '12px',
+          fontSize: '16px',
+          border: '2px solid #ddd',
+          borderRadius: '8px',
+          marginBottom: '20px'
+        }}
+      />
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+          gap: '15px'
+        }}
+      >
+        {filteredIcons.slice(0, 100).map((name: string) => (
+          <div
+            key={name}
+            onClick={() => setSelected(name)}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+              padding: '15px',
+              border: selected === name ? '2px solid #007bff' : '1px solid #ddd',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              transition: 'all 0.2s',
+              backgroundColor: selected === name ? '#f0f8ff' : 'white'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = '#007bff';
+              e.currentTarget.style.transform = 'translateY(-2px)';
+            }}
+            onMouseLeave={(e) => {
+              if (selected !== name) {
+                e.currentTarget.style.borderColor = '#ddd';
+              }
+              e.currentTarget.style.transform = 'translateY(0)';
+            }}
+          >
+            <Icon name={name} size={32} />
+            <div style={{ 
+              fontSize: '10px', 
+              textAlign: 'center', 
+              wordBreak: 'break-word' 
+            }}>
+              {name}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {search && (
+        <div style={{ marginTop: '20px', color: '#666' }}>
+          Found {filteredIcons.length} icons matching "{search}"
+        </div>
+      )}
+
+      {selected && (
+        <div style={{
+          position: 'fixed',
+          bottom: '20px',
+          right: '20px',
+          padding: '15px 20px',
+          background: '#007bff',
+          color: 'white',
+          borderRadius: '8px',
+          boxShadow: '0 4px 12px rgba(0,0,0,0.15)'
+        }}>
+          Selected: <code style={{ fontWeight: 'bold' }}>{selected}</code>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IconGallery;
+```
+
+### Generic Icon Component Wrapper
+
+```tsx
+import { Icon, IconProps } from '@icon-craft/react-ts';
+import { FC } from 'react';
+
+interface AnimatedIconProps extends Omit<IconProps, 'style'> {
+  animate?: boolean;
+  animationType?: 'spin' | 'pulse' | 'bounce';
+}
+
+const AnimatedIcon: FC<AnimatedIconProps> = ({ 
+  animate = false,
+  animationType = 'spin',
+  style,
+  ...props 
+}) => {
+  const animations = {
+    spin: { animation: 'spin 1s linear infinite' },
+    pulse: { animation: 'pulse 2s ease-in-out infinite' },
+    bounce: { animation: 'bounce 1s ease-in-out infinite' }
+  };
+
+  return (
+    <Icon 
+      {...props}
+      style={{
+        ...style,
+        ...(animate ? animations[animationType] : {})
+      }}
+    />
+  );
+};
+
+// Usage
+<AnimatedIcon name="loader" animate animationType="spin" />
+<AnimatedIcon name="heart" animate animationType="pulse" color="red" />
+```
+
+---
+
+## 📚 Available Icons
+
+### Icon Categories
+
+Icon-Craft includes **3475+ icons** across multiple categories:
+
+- **UI & Navigation** - home, menu, settings, search, filter, more, etc.
+- **Media Controls** - play, pause, stop, forward, rewind, volume, etc.
+- **Communication** - mail, message, phone, chat, notification, etc.
+- **E-commerce** - shopping-cart, credit-card, tag, dollar, wallet, etc.
+- **Files & Folders** - file, folder, save, upload, download, cloud, etc.
+- **Arrows & Directions** - arrow-up, arrow-down, chevron-right, etc.
+- **Social Media** - facebook, twitter, instagram, github, linkedin, etc.
+- **Weather** - sun, cloud, rain, snow, wind, moon, etc.
+- **Devices** - smartphone, tablet, laptop, monitor, printer, etc.
+- **Business** - briefcase, chart, graph, analytics, presentation, etc.
+- **Health & Medical** - heart, medical, pill, hospital, etc.
+- **Education** - book, graduation, pencil, etc.
+- **And many more!**
+
+### Finding Icons (Type-Safe)
+
+```tsx
+import { iconNames, iconMap, IconName } from '@icon-craft/react-ts';
+
+// Get array of all icon names (fully typed)
+const allIcons: string[] = iconNames;
+
+// Get icon name to component name mapping
+const mapping: Record<string, string> = iconMap;
+
+// Type-safe icon name
+const myIconName: IconName = 'home';
+
+// Search for specific icons with type safety
+const searchIcons = (query: string): string[] => {
+  return iconNames.filter(name => name.includes(query));
+};
+
+const arrowIcons = searchIcons('arrow');
+console.log(arrowIcons);
+// ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', ...]
+```
+
+### Popular Icons
+
+```tsx
+// UI & Navigation
+<Icon name="home" />
+<Icon name="menu" />
+<Icon name="search" />
+<Icon name="settings" />
+<Icon name="user" />
+<Icon name="bell" />
+<Icon name="star" />
+
+// Actions
+<Icon name="edit" />
+<Icon name="trash" />
+<Icon name="save" />
+<Icon name="download" />
+<Icon name="upload" />
+<Icon name="share" />
+<Icon name="copy" />
+
+// Media
+<Icon name="play" />
+<Icon name="pause" />
+<Icon name="stop" />
+<Icon name="volume" />
+<Icon name="camera" />
+<Icon name="image" />
+<Icon name="video" />
+
+// Communication
+<Icon name="mail" />
+<Icon name="message" />
+<Icon name="phone" />
+<Icon name="chat" />
+
+// Arrows
+<Icon name="arrow-up" />
+<Icon name="arrow-down" />
+<Icon name="arrow-left" />
+<Icon name="arrow-right" />
+<Icon name="chevron-up" />
+<Icon name="chevron-down" />
+
+// Social
+<Icon name="github" />
+<Icon name="twitter" />
+<Icon name="facebook" />
+<Icon name="instagram" />
+<Icon name="linkedin" />
+```
+
+---
+
+## 🎯 JavaScript Version
+
+Need a JavaScript-only version? Check out:
+
+```bash
+npm install @icon-craft/react
+```
+
+The JavaScript version includes:
+- Same 3475+ icons
+- Same API and features
+- No TypeScript overhead
+- Perfect for pure JS projects
+
+[View @icon-craft/react on NPM →](https://www.npmjs.com/package/@icon-craft/react)
+
+---
+
+## 📦 Bundle Size & Performance
+
+### Package Size
+- **Source Package**: ~23MB (includes all 3475 icons)
+- **Per Icon (after tree-shaking)**: ~2-5KB
+- **Runtime Dependencies**: 0 (only React peer dependency)
+- **TypeScript Definitions**: Included
+
+### Optimization Tips
+
+#### ✅ Best Practice (Tree-shakeable)
+```tsx
+// Import only what you need
+import { IconHome, IconHeart, IconSearch } from '@icon-craft/react-ts';
+```
+
+#### ⚠️ Less Optimal
+```tsx
+// Imports everything
+import * as Icons from '@icon-craft/react-ts';
+```
+
+#### 🚀 Code Splitting (Advanced)
+```tsx
+import { lazy, Suspense } from 'react';
+
+const Icon = lazy(() => 
+  import('@icon-craft/react-ts').then(m => ({ default: m.Icon }))
+);
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Icon name="home" />
+    </Suspense>
+  );
+}
+```
+
+### Build Tool Support
+
+Icon-Craft TypeScript works seamlessly with:
+- ✅ Webpack 5
+- ✅ Vite
+- ✅ Rollup
+- ✅ Parcel
+- ✅ esbuild
+- ✅ Create React App (TypeScript template)
+- ✅ Next.js (with TypeScript)
+- ✅ Remix (with TypeScript)
+- ✅ Gatsby (with TypeScript)
+
+---
+
+## 🌍 Browser Support
+
+- ✅ Chrome (latest)
+- ✅ Firefox (latest)
+- ✅ Safari (latest)
+- ✅ Edge (latest)
+- ✅ Opera (latest)
+- ⚠️ IE 11 (with polyfills)
+
+**Requirements:**
+- Modern browsers with SVG support
+- React 16.8+ (Hooks support)
+- TypeScript 4.0+ (for best experience)
+
+---
+
+## 🤔 FAQ
+
+### Why TypeScript?
+
+TypeScript provides:
+- 🔒 **Type Safety** - Catch errors before runtime
+- 💡 **IntelliSense** - Autocomplete in your IDE
+- 📚 **Self-Documenting** - Props are documented via types
+- 🔄 **Refactoring** - Safe and easy code changes
+- 🐛 **Fewer Bugs** - Many bugs caught at compile time
+
+### How is this different from @icon-craft/react?
+
+| Feature | @icon-craft/react-ts | @icon-craft/react |
+|---------|---------------------|-------------------|
+| **TypeScript** | ✅ Full support | ❌ No types |
+| **IntelliSense** | ✅ Complete | ⚠️ Limited |
+| **Type Safety** | ✅ Compile-time | ❌ Runtime only |
+| **Bundle Size** | Same | Same |
+| **Icons** | 3475+ | 3475+ |
+| **Best For** | TS/TSX projects | JS/JSX projects |
+
+### Can I use this in a JavaScript project?
+
+Yes, but you'll lose TypeScript benefits. For JavaScript projects, we recommend [@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react).
+
+### Does this work with Next.js?
+
+Yes! Works perfectly with Next.js TypeScript:
+
+```tsx
+// app/page.tsx (Next.js 13+)
+import { Icon } from '@icon-craft/react-ts';
+
+export default function Home() {
+  return <Icon name="home" size={32} />;
+}
+```
+
+### How do I get autocomplete for icon names?
+
+Just start typing in your IDE (VS Code, WebStorm, etc.):
+
+```tsx
+<Icon name="ho..." />
+//          ↑ Autocomplete shows: home, hospital, hotel, etc.
+```
+
+Make sure your IDE has TypeScript support enabled.
+
+### Can I use this with strict mode?
+
+Yes! Icon-Craft is fully compatible with TypeScript strict mode:
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "strict": true
+  }
+}
+```
+
+---
+
+## 🔄 Migration Guide
+
+### From @icon-craft/react (JavaScript)
+
+```tsx
+// Before (JavaScript)
+import { Icon, IconHome } from '@icon-craft/react';
+
+// After (TypeScript)
+import { Icon, IconHome } from '@icon-craft/react-ts';
+
+// API is identical, just add types!
+```
+
+### From react-icons
+
+```tsx
+// Before (react-icons)
+import { FaHome, FaHeart } from 'react-icons/fa';
+<FaHome size={24} />
+
+// After (icon-craft TypeScript)
+import { IconHome, IconHeart } from '@icon-craft/react-ts';
+<IconHome size={24} />
+```
+
+### From Feather Icons
+
+```tsx
+// Before (react-feather)
+import { Home, Heart } from 'react-feather';
+<Home size={24} />
+
+// After (icon-craft TypeScript)
+import { IconHome, IconHeart } from '@icon-craft/react-ts';
+<IconHome size={24} />
+```
+
+---
+
+## ⚖️ Legal & Attribution
+
+### Licensing
+
+This library is **MIT licensed**. It does not redistribute original icon packages but transforms and generates icons into a unified React component format with TypeScript definitions.
+
+### Icon Sources
+
+Icon-Craft combines 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)
+
+#### **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)
+
+Both licenses **explicitly permit** modification, redistribution, and commercial use.
+
+### Third-Party Notices
+
+Full license texts are included in the [LICENSE](./LICENSE) file.
+
+---
+
+## 🤝 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
+
+### Reporting Issues
+
+Found a bug or have a suggestion? [Open an issue](https://github.com/PATEL-KRISH-0/icon-craft/issues)
+
+---
+
+## 📊 Stats & Links
+
+- 📦 [NPM Package](https://www.npmjs.com/package/@icon-craft/react-ts)
+- 🐙 [GitHub Repository](https://github.com/PATEL-KRISH-0/icon-craft)
+- 🐛 [Report Issues](https://github.com/PATEL-KRISH-0/icon-craft/issues)
+- 💬 [Discussions](https://github.com/PATEL-KRISH-0/icon-craft/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)**
+
+---
+
+## 📄 License
+
+MIT License © 2026 Krish Patel
+
+See the [LICENSE](./LICENSE) file for complete details.
+
+---
+
+<div align="center">
+
+**Made with ❤️ and TypeScript 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-ts](https://www.npmjs.com/package/@icon-craft/react-ts)** · **[@icon-craft/react](https://www.npmjs.com/package/@icon-craft/react)** · **[GitHub](https://github.com/PATEL-KRISH-0/icon-craft)**
+
+</div>