# @dropify/fontawesome-icons

Pre-bundled FontAwesome icons for React applications. This package provides optimized, tree-shakeable SVG icon components.

## Features

- 🚀 **18,684+ icons** across 5 icon types
- 📦 **Tree-shakeable** - only bundle icons you use
- ⚡ **Pre-bundled** - fast builds, low memory usage
- 🎨 **Multiple styles** - light, solid, regular, duotone, brands
- 💪 **TypeScript** - fully typed with auto-generated definitions

## Installation

This package is published to GitHub Packages. See [PUBLISH.md](./PUBLISH.md) for setup instructions.

```bash
# After configuring .npmrc and GITHUB_TOKEN
npm install @YOUR_GITHUB_USERNAME/fontawesome-icons
# or
yarn add @YOUR_GITHUB_USERNAME/fontawesome-icons
# or
pnpm add @YOUR_GITHUB_USERNAME/fontawesome-icons
```

## Usage

### Basic Usage

```tsx
import FAIcons from "@YOUR_GITHUB_USERNAME/fontawesome-icons";

function MyComponent() {
  return (
    <div>
      <FAIcons.light.Search width={24} height={24} />
      <FAIcons.solid.Heart width={24} height={24} />
      <FAIcons.regular.User width={24} height={24} />
    </div>
  );
}
```

### Using Icon Types

```tsx
import { light, solid, regular, duotone, brands } from "@YOUR_GITHUB_USERNAME/fontawesome-icons";

// Use specific type
<light.Search width={24} height={24} />
<solid.Heart width={24} height={24} />
<brands.Github width={24} height={24} />
```

### TypeScript Support

```tsx
import FAIcons, { type IconType, ICON_TYPES, ICON_NAMES_BY_TYPE } from "@YOUR_GITHUB_USERNAME/fontawesome-icons";

// Get all icon types
const types: IconType[] = ICON_TYPES; // ["light", "solid", "regular", "duotone", "brands"]

// Get icon names by type
const lightIcons = ICON_NAMES_BY_TYPE.light; // string[]
```

### Dynamic Icons

```tsx
import FAIcons, { type IconType } from "@YOUR_GITHUB_USERNAME/fontawesome-icons";

function DynamicIcon({ iconName, type = "regular" }: { iconName: string; type?: IconType }) {
  const Icon = FAIcons[type][iconName];
  return Icon ? <Icon width={24} height={24} /> : null;
}

// Usage
<DynamicIcon iconName="Search" type="light" />
```

## Available Icon Types

| Type | Count | Description |
|------|-------|-------------|
| **light** | 4,671 | Light weight icons |
| **solid** | 4,671 | Solid filled icons |
| **regular** | 4,671 | Regular weight icons |
| **duotone** | 4,671 | Two-tone icons |
| **brands** | varies | Brand logos |

**Total: 18,684+ icons**

## Icon Props

All icons accept standard SVG props:

```tsx
<FAIcons.light.Search
  width={24}
  height={24}
  color="currentColor"
  className="my-icon"
  onClick={() => {}}
  // ... any other SVG props
/>
```

## Performance

This package is optimized for performance:

- ✅ Pre-bundled into a single file (no 18k+ file analysis)
- ✅ Tree-shaking enabled (only icons you use are bundled)
- ✅ Fast builds (webpack/vite analyze 1 file instead of 18k+)
- ✅ Low memory usage (2-3GB vs 13GB+ with individual files)

## Building

To build the package from source:

```bash
npm run build
```

This generates the `dist/` directory with:
- `index.js` - Bundled icon components
- `index.d.ts` - TypeScript definitions

## License

MIT

## Author

Dropify
