# Doodle Icons for React

![React Doodle Icons](./react-doodle-icons.png)

React components for doodle-style icons, optimized for modern apps (ESM, TypeScript, tree-shakable).

A beautiful collection of 439 hand-drawn doodle-style SVG icons as React components. Perfect for adding a playful, sketch-like aesthetic to your web applications. Based on [Doodle Icons by ](https://khushmeen.com/icons.html) by Khushmeen Sidhu. 

![npm](https://img.shields.io/npm/v/react-doodle-icons)
![license](https://img.shields.io/npm/l/react-doodle-icons)
![React](https://img.shields.io/badge/react-%3E%3D18-blue)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-doodle-icons)

## Features

- 439 unique hand-drawn icons
- Fully customizable size and color
- TypeScript support out of the box
- Tree-shakeable for optimal bundle size (~200 bytes per icon)
- React 18+ support (forward-compatible with React 19)
- No external dependencies
- Optimized for modern bundlers (Vite, Webpack, Rollup, esbuild)

## Installation

```bash
npm install react-doodle-icons
# or
yarn add react-doodle-icons
# or
pnpm add react-doodle-icons
```

## Quick Start

### Option 1: Import Individual Icons (Recommended for Tree-Shaking)

For the smallest bundle size, import only the icons you need:

```tsx
import { ChipIcon } from 'react-doodle-icons/icons/ChipIcon'
import { RocketIcon } from 'react-doodle-icons/icons/RocketIcon'
import { HeartIcon } from 'react-doodle-icons/icons/HeartIcon'

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <ChipIcon />
      <RocketIcon size={48} color="#ff6b6b" />
      <HeartIcon size={32} className="animate-pulse" />
    </div>
  )
}
```

### Option 2: Import from Main Entry

You can also import multiple icons from the main package (modern bundlers will tree-shake unused icons):

```tsx
import { ChipIcon, RocketIcon, HeartIcon } from 'react-doodle-icons'

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem' }}>
      <ChipIcon />
      <RocketIcon size={48} color="#ff6b6b" />
      <HeartIcon size={32} className="animate-pulse" />
    </div>
  )
}
```

## API

### Props

All icon components accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number` \| `string` | `24` | Icon size in pixels |
| `color` | `string` | `"currentColor"` | Icon fill color |
| `className` | `string` | - | CSS class name |
| `style` | `React.CSSProperties` | - | Inline styles |
| ...rest | `SVGProps<SVGSVGElement>` | - | All standard SVG attributes |

### Examples

**Basic Usage:**
```tsx
<ChipIcon />
```

**Custom Size:**
```tsx
<ChipIcon size={64} />
```

**Custom Color:**
```tsx
<ChipIcon color="#3b82f6" />
// or with Tailwind
<ChipIcon className="text-blue-500" />
```

**With Click Handler:**
```tsx
<ChipIcon 
  size={48} 
  color="green" 
  onClick={() => console.log('Clicked!')}
  style={{ cursor: 'pointer' }}
/>
```

**Responsive Size:**
```tsx
<ChipIcon size={{ xs: 24, md: 48, lg: 64 }} />
```

## Icon Categories

### Arrows (26 icons)
ArrowCircleUp, ArrowCircleDown, ArrowLeft, ArrowRight, ChevronsUp, ChevronsDown, etc.

### Currency (8 icons)
Dollar, Euro, Pound, Yen, Won, Ruble, Rupee, Franc

### E-commerce (25 icons)
ShoppingCart, Bag, Basket, Box, Card, Tag, Sale, QrCode, Truck, Warehouse, etc.

### Emojis (13 icons)
HappyEmoji, SmilingEmoji, LaughEmoji, SurprisedEmoji, WinkEmoji, SadEmoji, etc.

### Files (17 icons)
FileText, FilePdf, FileImage, FileCode, FileCsv, FileSvg, FileZip, etc.

### Finance (13 icons)
Bank, Wallet, PiggyBank, Cash, Coin, TrendUp, TrendDown, Saving, etc.

### Food & Drink (15 icons)
Burger, Pizza, Cake, Candy, CoffeeCup, IceCream, Drink, Water, etc.

### Gender Symbols (13 icons)
Male, Female, Transgender, NonBinaryTransgender, Bisexual, Gay, Lesbian, etc.

### Hand Gestures (48 icons)
ThumbsUp, ThumbsDown, PointUp, PointDown, Clap, Wave, Ok, Peace, etc.

### Health & Medical (17 icons)
HeartBeat, FirstAid, Pills, Syringe, Stethoscope, Microscope, etc.

### Interface (100+ icons)
Search, Menu, Settings, User, Home, Bell, Bookmark, Calendar, Clock, etc.

### Brand Logos (27 icons)
Apple, Google, Facebook, Twitter, Instagram, LinkedIn, GitHub, etc.

### Miscellaneous (13 icons)
Bot, Rocket, Car, Plane, Ship, Fire, Bug, Satellite, etc.

### Objects (17 icons)
Camera, Crown, Guitar, Tv, Sofa, Frame, PaintBrush, Vector, etc.

### Weather (12 icons)
Sunny, Cloudy, Rain, Snow, Thunderstorm, Wind, Snowman, etc.

## Development

### Setup

```bash
# Clone the repository
git clone https://github.com/yourusername/doodle-icons.git
cd doodle-icons

# Install dependencies
npm install
```

### Available Scripts

```bash
# Generate icons from SVG files
npm run generate

# Build the package
npm run build

# Watch mode for development
npm run dev
```

### Adding New Icons

1. Add your SVG files to the source directory
2. Run `npm run generate` to create React components
3. Run `npm run build` to rebuild the package

## Browser Support

| Browser | Version |
|---------|---------|
| Chrome | Latest |
| Firefox | Latest |
| Safari | Latest |
| Edge | Latest |
| IE | 11+ |

## Performance

- **Optimized bundle size**: Individual icons are ~100-200 bytes each
- **Full tree-shaking support**: Only include the icons you actually use
- **No runtime dependencies**
- **Pure functional components** with React.forwardRef for optimal performance
- **Side-effect free**: Per-icon imports are marked as side-effect-free for maximum tree-shaking efficiency

### Bundle Size Optimization

When using per-icon imports (`import { Icon } from 'doodle-icons/icons/Icon'`), your bundler will only include the specific icons you import, keeping your bundle size minimal.

**Example bundle sizes:**
- Single icon: ~200 bytes
- 10 icons: ~2KB
- All 439 icons: ~800KB (unminified)

**Why so small?**
- Icons are split into individual files
- No shared runtime or utility code
- SVG paths are optimized and minified
- Modern bundlers can eliminate unused exports

## Accessibility

All icons are implemented as SVG elements with proper ARIA attributes support:

```tsx
<ChipIcon 
  role="img" 
  aria-label="Computer chip" 
  aria-hidden={false}
/>
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

## License

MIT License - feel free to use these icons in your personal and commercial projects.

## Acknowledgments

**Icon Design:** Original doodle-style SVG icons designed by [Khushmeen Sidhu](https://khushmeen.com/)

**React Library:** React component implementation and packaging by [Mike Acler](https://github.com/agilek)

---

## Package Information

<!-- Machine-readable metadata for LLMs and search engines -->

| Property | Value |
|----------|-------|
| **Package Name** | `react-doodle-icons` |
| **Version** | 1.0.0 |
| **Total Icons** | 439 |
| **Categories** | arrows, gestures, emoji, ecommerce, currency, finance, files, food, health, interface, communication, brands, gender, weather, objects, nature, miscellaneous |
| **React Version** | >=18 |
| **TypeScript** | Yes, full support |
| **Tree-shakable** | Yes, side-effect free per-icon imports |
| **Bundle Size** | ~200 bytes per icon (minified) |
| **License** | MIT |
| **Repository** | [github.com/agilek/react-doodle-icons](https://github.com/agilek/react-doodle-icons) |
| **npm** | [npmjs.com/package/react-doodle-icons](https://www.npmjs.com/package/react-doodle-icons) |
| **Icon Designer** | [Khushmeen Sidhu](https://khushmeen.com/) |
| **React Implementation** | [Mike Acler](https://github.com/agilek) |

### Quick Reference

- **All icons list**: [`icons.json`](./icons.json)
- **Search index**: [`search-index.json`](./search-index.json)
- **Changelog**: [`CHANGELOG.md`](./CHANGELOG.md)

---

React library made by [Mike Acler](https://github.com/agilek) | Icons designed by [Khushmeen Sidhu](https://khushmeen.com/)