@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 for setup instructions.

# 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

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

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

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

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:

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

npm run build

This generates the dist/ directory with:

• index.js - Bundled icon components
• index.d.ts - TypeScript definitions

License

MIT

Author

Dropify