@icon-craft/react

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.

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

📦 Installation · 🚀 Quick Start · 📖 Documentation · 💡 Examples · 🔧 API Reference

✨ 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

# 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.

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.

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:

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:

// 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:

// 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:

// 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

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

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

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

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

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

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

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

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

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

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

// 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

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

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)

// 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)

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

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

Vite

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

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

export default App;

Create React App

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

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

export default App;

Remix

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

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

Gatsby

// 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):

// 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?

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 for visual search.

How do I make icons clickable?

Simply add an onClick handler:

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

Can I animate icons?

Yes! Use CSS or inline styles:

<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:

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

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

Or using state:

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:

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:

// 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

// 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)

// 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

// 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

// ✅ 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 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

# 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

📊 Links

• 📦 NPM Package
• 🐙 GitHub Repository
• 🎨 Icon Browser
• 🌐 Icon Font CDN Version
• 🐛 Report Issues
• 💬 Discussions

🙏 Credits

• Feather Icons - feathericons.com
• Remix Icon - remixicon.com
• Built with ❤️ by Krish Patel

📄 Package Info

{
  "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"
  ]
}

Made with ❤️ by Krish Patel

If you find Icon-Craft useful, please consider giving it a ⭐️ on GitHub!

@icon-craft/react · GitHub · CDN Version · Website