Nuxt Feather Icons is the most efficient way to use Feather Icons in your Nuxt project. Every icon is pre-compiled into a Vue render function, ensuring your production bundle only includes exactly what you use.

📖 Documentation

For full installation guides, configuration options, and the Icon Gallery, visit our documentation:

👉 Documentation

✨ Highlights

• Zero-Runtime Compiler: Icons are pre-compiled into lightweight render functions (h()).
• Smart Tree-Shaking: Automatically excludes unused icons from your bundle.
• Auto-imported: Use <HomeIcon /> anywhere without manual imports.
• Dynamic Resolver: Efficiently render icons from strings using useFeatherIcon().
• SSR Ready: Optimized for fast server-side rendering and hydration.

📦 Quick Start

# Install using nuxi
npx nuxi@latest module add nuxt-feather-icons

<template>
  <div class="flex gap-4">
    <HomeIcon size="24" />
    <UsersIcon size="2x" class="text-blue-500" />
    <SettingsIcon :stroke-width="1.5" />
  </div>
</template>

🛠️ Configuration

export default defineNuxtConfig({
  modules: ['nuxt-feather-icons'],
    nuxtFeatherIcons: {
        // Prefix for icon components (e.g. <FHomeIcon />)
        prefix: 'F',

        // Global default size (string or number)
        size: 24,

        // Global default stroke width
        strokeWidth: 2,

        // Global default CSS classes
        class: 'my-default-icon-class'
    }
})

⚖️ License

Released under the MIT by @4slan.