🎨 astrojs-heroicons

Beautiful Heroicons as fully-typed Astro components with IntelliSense support.

✨ Features

• 🎯 1,200+ icons in 4 variants (Outline, Solid, Mini, Micro)
• 🔍 Full TypeScript support with IntelliSense autocomplete
• 📦 Tree-shakeable - only import what you use
• 🎨 Fully customizable - accepts all SVG/HTML attributes
• ⚡ Zero runtime overhead - compiled at build time
• 🧩 Native Astro components - no framework wrappers needed

📦 Installation

npm install astrojs-heroicons
# or
yarn add astrojs-heroicons
# or
pnpm add astrojs-heroicons

🚀 Quick Start

---
import { HomeOutline, UserSolid, CheckMini, XMarkMicro } from 'astrojs-heroicons';
---

<div class="flex gap-4">
  <HomeOutline class="w-6 h-6 text-blue-500" />
  <UserSolid class="w-6 h-6 text-green-500" />
  <CheckMini class="w-5 h-5 text-purple-500" />
  <XMarkMicro class="w-4 h-4 text-red-500" />
</div>

📖 Usage

Icon Variants

Each icon comes in 4 variants with different names:

| Variant | Size | Naming Pattern | Example | | ----------- | ----- | --------------- | ------------- | | Outline | 24×24 | {Name}Outline | HomeOutline | | Solid | 24×24 | {Name}Solid | HomeSolid | | Mini | 20×20 | {Name}Mini | HomeMini | | Micro | 16×16 | {Name}Micro | HomeMicro |

Import Styles

Main entry (all icons):

---
import { HomeOutline, UserSolid } from 'astrojs-heroicons';
---

Subpath imports (for smaller bundles):

---
import { HomeOutline } from 'astrojs-heroicons/outline';
import { UserSolid } from 'astrojs-heroicons/solid';
import { CheckMini } from 'astrojs-heroicons/mini';
import { XMarkMicro } from 'astrojs-heroicons/micro';
---

Customization

All icons accept standard SVG and HTML attributes:

---
import { HeartSolid } from 'astrojs-heroicons';
---

<!-- Custom styling -->
<HeartSolid
  class="w-8 h-8 text-red-500 hover:text-red-600 transition-colors"
/>

<!-- Accessibility attributes -->
<HeartSolid
  aria-label="Like this post"
  role="img"
  class="w-6 h-6"
/>

<!-- Data attributes -->
<HeartSolid
  data-action="like"
  data-id="123"
  class="w-6 h-6 cursor-pointer"
/>

<!-- Inline styles -->
<HeartSolid
  style="width: 2rem; height: 2rem; color: hotpink;"
/>

<!-- All SVG attributes work -->
<HeartSolid
  width="32"
  height="32"
  fill="currentColor"
  stroke="none"
/>

Real-World Examples

Navigation Menu:

---
import { HomeOutline, UserOutline, CogOutline } from 'astrojs-heroicons';
---

<nav class="flex gap-6">
  <a href="/" class="flex items-center gap-2">
    <HomeOutline class="w-5 h-5" />
    <span>Home</span>
  </a>
  <a href="/profile" class="flex items-center gap-2">
    <UserOutline class="w-5 h-5" />
    <span>Profile</span>
  </a>
  <a href="/settings" class="flex items-center gap-2">
    <CogOutline class="w-5 h-5" />
    <span>Settings</span>
  </a>
</nav>

Button with Icon:

---
import { PlusCircleSolid } from 'astrojs-heroicons';
---

<button class="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg">
  <PlusCircleSolid class="w-5 h-5" />
  Add New Item
</button>

Status Indicators:

---
import { CheckCircleSolid, XCircleSolid, ExclamationCircleSolid } from 'astrojs-heroicons';
---

<div class="space-y-2">
  <div class="flex items-center gap-2 text-green-600">
    <CheckCircleSolid class="w-5 h-5" />
    <span>Success</span>
  </div>
  <div class="flex items-center gap-2 text-red-600">
    <XCircleSolid class="w-5 h-5" />
    <span>Error</span>
  </div>
  <div class="flex items-center gap-2 text-yellow-600">
    <ExclamationCircleSolid class="w-5 h-5" />
    <span>Warning</span>
  </div>
</div>

🎯 TypeScript Support

Enjoy full IntelliSense support when importing:

---
// Start typing and get autocomplete suggestions!
import { Home... } from 'astrojs-heroicons';
//             ^ HomeOutline, HomeSolid, HomeMini, HomeMicro
---

Each component includes JSDoc comments with icon metadata:

/** Heroicon: home (Outline variant) - Astro component */
export { default as HomeOutline } from "./HomeOutline.astro";

🎨 Icon Variants Comparison

---
import { HomeOutline, HomeSolid, HomeMini, HomeMicro } from 'astrojs-heroicons';
---

<div class="flex items-end gap-4">
  <HomeOutline class="w-6 h-6" />  <!-- 24×24 outline -->
  <HomeSolid class="w-6 h-6" />    <!-- 24×24 solid -->
  <HomeMini class="w-5 h-5" />     <!-- 20×20 solid -->
  <HomeMicro class="w-4 h-4" />    <!-- 16×16 solid -->
</div>

💡 Why This Package?

Existing Heroicons packages for Astro had limitations:

• ❌ No centralized exports
• ❌ Missing type definitions
• ❌ No IntelliSense autocomplete
• ❌ Cumbersome imports for large projects

This package solves all these issues:

• ✅ Single import statement for any icon
• ✅ Full TypeScript support with .d.ts files
• ✅ IntelliSense shows all 1,200+ icons as you type
• ✅ Clean, predictable naming convention
• ✅ Native Astro components (no React/Vue wrappers)

📚 Finding Icons

Browse all available icons at the official Heroicons website: heroicons.com →

Naming Convention:

• Website shows: academic-cap
• Import as: AcademicCapOutline, AcademicCapSolid, AcademicCapMini, AcademicCapMicro

🤝 Contributing

Contributions are welcome! This package is automatically generated from the official Heroicons library.

📄 License

MIT © [Your Name]

🙏 Credits

All icons are from Heroicons by Tailwind Labs.

This package provides an Astro-friendly wrapper with enhanced developer experience.

Built with ❤️ for the Astro community