@icon-craft/react 1.0.0

package/readme.md

@@ -0,0 +1,794 @@
+# @icon-craft/react
+
+<div align="center">
+
+![Icon-Craft Banner](https://img.shields.io/badge/Icon--Craft-React-61dafb?style=for-the-badge&logo=react&logoColor=white)
+
+**A comprehensive React icon library with 3475+ beautifully crafted SVG icons**
+
+[![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/blob/main/LICENSE)
+
+**3475+ icons** · **Two usage methods** · **Tree-shakeable** · **Zero dependencies** · **Fully customizable**
+
+[Installation](#-installation) · [Quick Start](#-quick-start) · [Documentation](#-documentation) · [Examples](#-examples) · [TypeScript](#-typescript-version)
+
+</div>
+
+---
+
+## ✨ Features
+
+- 🎨 **3475+ Premium Icons** - Unified collection from Feather Icons and Remix Icon
+- ⚛️ **Pure React Components** - Native JSX components, no canvas or DOM manipulation
+- 🎯 **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
+
+# Yarn
+yarn add @icon-craft/react
+
+# PNPM
+pnpm add @icon-craft/react
+```
+
+**Peer Dependencies:**
+- React >= 16.8.0
+- React-DOM >= 16.8.0
+
+---
+
+## 🚀 Quick Start
+
+### Method 1: Dynamic Icon Component
+
+Perfect for rendering icons dynamically based on user input or configuration.
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+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 and tree-shaking optimization.
+
+```jsx
+import { IconHome, IconHeart, IconSearch } from '@icon-craft/react';
+
+function App() {
+  return (
+    <div>
+      <IconHome size={24} />
+      <IconHeart size={32} color="red" />
+      <IconSearch size={24} color="#0066cc" />
+    </div>
+  );
+}
+```
+
+---
+
+## 📖 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` | `CSSProperties` | - | Inline styles object |
+| `onClick` | `function` | - | Click event handler |
+| `...props` | `SVGAttributes` | - | Any other valid SVG attributes |
+
+---
+
+## 💡 Usage Examples
+
+### Basic Usage
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+// 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
+<Icon name="menu" onClick={() => console.log('Clicked!')} />
+```
+
+### Icon Button Component
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+function IconButton({ icon, label, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '10px 20px',
+        border: 'none',
+        borderRadius: '8px',
+        background: '#007bff',
+        color: 'white',
+        cursor: 'pointer',
+        fontSize: '16px'
+      }}
+    >
+      <Icon name={icon} size={20} />
+      {label}
+    </button>
+  );
+}
+
+// Usage
+<IconButton icon="download" label="Download" onClick={handleDownload} />
+<IconButton icon="share" label="Share" onClick={handleShare} />
+```
+
+### With Tailwind CSS
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+function App() {
+  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" 
+      />
+      <Icon 
+        name="heart" 
+        className="w-8 h-8 text-red-500 hover:scale-110 transition-transform" 
+      />
+      <Icon 
+        name="settings" 
+        className="w-5 h-5 text-gray-600 dark:text-gray-300" 
+      />
+    </div>
+  );
+}
+```
+
+### Interactive Favorite Button
+
+```jsx
+import { useState } from 'react';
+import { Icon } 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'
+      }}
+      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.1)'}
+      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
+    >
+      <Icon
+        name="heart"
+        size={32}
+        color={isFavorite ? '#ff4444' : '#cccccc'}
+        style={{
+          fill: isFavorite ? '#ff4444' : 'none',
+          transition: 'all 0.3s ease'
+        }}
+      />
+    </button>
+  );
+}
+```
+
+### Navigation Bar
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+function Navbar() {
+  const navItems = [
+    { icon: 'home', label: 'Home', path: '/' },
+    { icon: 'search', label: 'Search', path: '/search' },
+    { icon: 'bell', label: 'Notifications', path: '/notifications' },
+    { icon: 'user', label: 'Profile', path: '/profile' },
+    { icon: 'settings', label: 'Settings', path: '/settings' },
+  ];
+
+  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'
+          }}
+        >
+          <Icon name={item.icon} size={24} />
+          <span style={{ fontSize: '12px' }}>{item.label}</span>
+        </a>
+      ))}
+    </nav>
+  );
+}
+```
+
+### Loading Spinner
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+function LoadingSpinner() {
+  return (
+    <Icon
+      name="loader"
+      size={48}
+      style={{
+        animation: 'spin 1s linear infinite'
+      }}
+    />
+  );
+}
+
+// Add to your CSS:
+// @keyframes spin {
+//   from { transform: rotate(0deg); }
+//   to { transform: rotate(360deg); }
+// }
+```
+
+### Social Media Links
+
+```jsx
+import { Icon } from '@icon-craft/react';
+
+function SocialLinks() {
+  const socials = [
+    { name: 'github', url: 'https://github.com' },
+    { name: 'twitter', url: 'https://twitter.com' },
+    { name: 'facebook', url: 'https://facebook.com' },
+    { name: 'instagram', url: 'https://instagram.com' },
+    { name: 'linkedin', url: 'https://linkedin.com' },
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '20px' }}>
+      {socials.map((social) => (
+        <a
+          key={social.name}
+          href={social.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: '#333', transition: 'color 0.2s' }}
+          onMouseEnter={(e) => e.currentTarget.style.color = '#007bff'}
+          onMouseLeave={(e) => e.currentTarget.style.color = '#333'}
+        >
+          <Icon name={social.name} size={28} />
+        </a>
+      ))}
+    </div>
+  );
+}
+```
+
+### Icon Gallery/Picker
+
+```jsx
+import { useState } from 'react';
+import { iconNames, Icon } from '@icon-craft/react';
+
+function IconGallery() {
+  const [search, setSearch] = useState('');
+  const [selected, setSelected] = useState(null);
+
+  const filteredIcons = iconNames.filter(name =>
+    name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <input
+        type="text"
+        placeholder="Search icons..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        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) => (
+          <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>
+  );
+}
+```
+
+---
+
+## 📚 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
+
+```jsx
+import { iconNames, iconMap } from '@icon-craft/react';
+
+// Get array of all icon names
+console.log(iconNames);
+// ['home', 'heart', 'search', 'menu', ...]
+
+// Get icon name to component name mapping
+console.log(iconMap);
+// { 'home': 'IconHome', 'heart': 'IconHeart', ... }
+
+// Search for specific icons
+const searchIcons = iconNames.filter(name => name.includes('arrow'));
+console.log(searchIcons);
+// ['arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', ...]
+```
+
+### Popular Icons
+
+```jsx
+// 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" />
+```
+
+---
+
+## 🎯 TypeScript Version
+
+Looking for TypeScript support? Check out our TypeScript package:
+
+```bash
+npm install @icon-craft/react-ts
+```
+
+The TypeScript version includes:
+- Full TypeScript type definitions
+- Type-safe icon names
+- IntelliSense autocomplete
+- All the same icons and features
+
+[View @icon-craft/react-ts on NPM →](https://www.npmjs.com/package/@icon-craft/react-ts)
+
+---
+
+## 📦 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)
+
+### Optimization Tips
+
+#### ✅ Best Practice (Tree-shakeable)
+```jsx
+// Import only what you need
+import { IconHome, IconHeart, IconSearch } from '@icon-craft/react';
+```
+
+#### ⚠️ Less Optimal
+```jsx
+// Imports everything
+import * as Icons from '@icon-craft/react';
+```
+
+#### 🚀 Code Splitting (Advanced)
+```jsx
+import { lazy, Suspense } from 'react';
+
+const Icon = lazy(() => 
+  import('@icon-craft/react').then(m => ({ default: m.Icon }))
+);
+
+function App() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Icon name="home" />
+    </Suspense>
+  );
+}
+```
+
+### Build Tool Support
+
+Icon-Craft works seamlessly with:
+- ✅ Webpack 5
+- ✅ Vite
+- ✅ Rollup
+- ✅ Parcel
+- ✅ esbuild
+- ✅ Create React App
+- ✅ Next.js
+- ✅ Remix
+- ✅ Gatsby
+
+---
+
+## 🌍 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)
+
+---
+
+## 🤔 FAQ
+
+### How is this different from react-icons?
+
+| Feature | @icon-craft/react | react-icons |
+|---------|------------------|-------------|
+| **Icons** | 3475+ (Feather + Remix) | 40,000+ (multiple libraries) |
+| **Bundle Size** | Optimized, tree-shakeable | Larger bundle |
+| **Customization** | Full control (size, color, stroke) | Standard props |
+| **Focus** | Curated, unified design | Comprehensive variety |
+
+### Can I use this with Next.js?
+
+Yes! Icon-Craft works perfectly with Next.js:
+
+```jsx
+// app/page.jsx (Next.js 13+)
+import { Icon } from '@icon-craft/react';
+
+export default function Home() {
+  return <Icon name="home" size={32} />;
+}
+```
+
+### How do I make icons clickable?
+
+Simply add an `onClick` handler:
+
+```jsx
+<Icon 
+  name="trash" 
+  onClick={() => handleDelete()} 
+  style={{ cursor: 'pointer' }}
+/>
+```
+
+### Can I animate icons?
+
+Yes! Use CSS or inline styles:
+
+```jsx
+<Icon 
+  name="loader" 
+  style={{
+    animation: 'spin 1s linear infinite'
+  }}
+/>
+```
+
+### How do I change icon color on hover?
+
+```jsx
+<Icon 
+  name="heart"
+  className="hover-icon"
+/>
+
+// CSS
+// .hover-icon:hover { color: red; }
+```
+
+### Does this support SSR (Server-Side Rendering)?
+
+Yes! Icon-Craft is fully compatible with SSR frameworks like Next.js and Remix.
+
+### 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.
+
+---
+
+## 🔄 Migration Guide
+
+### From react-icons
+
+```jsx
+// Before (react-icons)
+import { FaHome, FaHeart } from 'react-icons/fa';
+<FaHome size={24} />
+
+// After (icon-craft)
+import { IconHome, IconHeart } from '@icon-craft/react';
+<IconHome size={24} />
+```
+
+### From Feather Icons
+
+```jsx
+// Before (react-feather)
+import { Home, Heart } from 'react-feather';
+<Home size={24} />
+
+// After (icon-craft)
+import { IconHome, IconHeart } from '@icon-craft/react';
+<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.
+
+### 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)
+- 🐙 [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 ❤️ 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)** · **[@icon-craft/react-ts](https://www.npmjs.com/package/@icon-craft/react-ts)** · **[GitHub](https://github.com/PATEL-KRISH-0/icon-craft)**
+
+</div>