npm package: @hugeicons/preact
Description: HugeIcons Pro Preact Component Library https://hugeicons.com
Author: Hugeicons
Latest version: 1.0.0

# @hugeicons/preact

> HugeIcons Pro Preact Component Library - Beautiful and customizable icons for your Preact applications

## What is HugeIcons?

HugeIcons is a comprehensive icon library designed for modern web applications. The free package includes 4,000+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 36,000 icons across 9 unique styles.

### Key Highlights
- **4,000+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
- **Regular Updates**: New icons added regularly to keep up with evolving design trends

> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.

## Table of Contents
- [What is HugeIcons?](#what-is-hugeicons)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Props](#props)
- [Examples](#examples)
  - [Basic Usage](#basic-usage)
  - [Custom Size and Color](#custom-size-and-color)
  - [Interactive Examples](#interactive-examples)
- [Performance](#performance)
- [Troubleshooting](#troubleshooting)
- [Related Packages](#related-packages)
- [Pro Version](#pro-version)
- [License](#license)

## Features

- 🎨 Customizable colors and sizes
- 💪 TypeScript support with full type definitions
- 🎯 Tree-shakeable for optimal bundle size
- 📱 Native SVG rendering for optimal performance
- ⚡ Lightweight and optimized
- 🔄 Alternate icon support for dynamic interactions

## Installation

```bash
# Using npm
npm install @hugeicons/preact @hugeicons/core-free-icons

# Using yarn
yarn add @hugeicons/preact @hugeicons/core-free-icons

# Using pnpm
pnpm add @hugeicons/preact @hugeicons/core-free-icons

# Using bun
bun add @hugeicons/preact @hugeicons/core-free-icons
```

## Usage

```jsx
import { HugeiconsIcon } from '@hugeicons/preact';
import { SearchIcon } from '@hugeicons/core-free-icons';

function MyComponent() {
  return (
    <HugeiconsIcon
      icon={SearchIcon}
      size={24}
      color="black"
      strokeWidth={1.5}
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `icon` | `IconType` | Required | The main icon to display |
| `altIcon` | `IconType` | - | Alternative icon that can be used for states, interactions, animations, or dynamic icon swapping |
| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
| `size` | `number` | `24` | Icon size in pixels |
| `color` | `string` | `currentColor` | Icon color (CSS color value) |
| `strokeWidth` | `number` | `undefined` | Width of the icon strokes. When used with `absoluteStrokeWidth`, the stroke width will be automatically scaled relative to the icon size |
| `absoluteStrokeWidth` | `boolean` | `false` | When true, the stroke width will be scaled relative to the icon size to maintain visual consistency across different sizes |
| `className` | `string` | - | CSS classes for styling the icon |

## Examples

### Basic Usage
```jsx
import { h } from 'preact';
import { HugeiconsIcon } from '@hugeicons/preact';
import { SearchIcon } from '@hugeicons/core-free-icons';

function BasicExample() {
  return (
    <div>
      <HugeiconsIcon icon={SearchIcon} />
    </div>
  );
}
```

### Custom Size and Color
```jsx
import { h } from 'preact';
import { HugeiconsIcon } from '@hugeicons/preact';
import { NotificationIcon } from '@hugeicons/core-free-icons';

function CustomExample() {
  return (
    <div>
      <HugeiconsIcon
        icon={NotificationIcon}
        size={32}
        color="#FF5733"
      />
    </div>
  );
}
```

### Interactive Examples

#### Search Bar with Clear Button
```jsx
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { HugeiconsIcon } from '@hugeicons/preact';
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';

function SearchExample() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <div className="search-container">
      <input
        value={searchValue}
        onInput={(e) => setSearchValue(e.target.value)}
        placeholder="Search..."
        className="search-input"
      />
      <button
        onClick={() => searchValue.length > 0 && setSearchValue('')}
        className="search-button"
      >
        <HugeiconsIcon
          icon={SearchIcon}
          altIcon={CloseCircleIcon}
          showAlt={searchValue.length > 0}
          color="#666"
        />
      </button>
    </div>
  );
}
```

#### Theme Toggle
```jsx
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { HugeiconsIcon } from '@hugeicons/preact';
import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  return (
    <button onClick={() => setIsDark(!isDark)} className="theme-toggle">
      <HugeiconsIcon
        icon={SunIcon}
        altIcon={MoonIcon}
        showAlt={isDark}
        color={isDark ? '#FFF' : '#000'}
      />
    </button>
  );
}
```

## Performance

The @hugeicons/preact package is designed with performance in mind:

- Tree-shakeable: Only the icons you use are included in your bundle
- Optimized SVG: All icons are optimized for size and performance
- Minimal dependencies: The package has minimal dependencies to keep your bundle size small

## Troubleshooting

### Icons not rendering correctly

Make sure you're using the correct import paths:

```jsx
// Correct
import { HugeiconsIcon } from '@hugeicons/preact';
import { SearchIcon } from '@hugeicons/core-free-icons';

// Incorrect
import { SearchIcon } from '@hugeicons/preact';
```

### TypeScript errors

If you're experiencing TypeScript errors, make sure you have the correct types installed:

```bash
npm install --save-dev @types/preact
```

## Related Packages

- [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon pack
- [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - React component library
- [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - React Native component library

## Pro Version

The pro version of HugeIcons includes:

- 36,000+ icons across 9 unique styles
- Regular updates with new icons
- Premium support
- Commercial license

Visit [hugeicons.com](https://hugeicons.com) to learn more about the pro version.

## License

This package is licensed under the MIT License.