Nuxt Feather Icons

High-performance Feather Icons for Nuxt with full Tree-Shaking and SSR support.

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: {
        /**
         * The icon library provider to use.
         * 'feather' for classic Feather Icons.
         * 'lucide' for the modern Lucide fork (more icons).
         * @default 'lucide'
         */
        provider: 'lucide',

        /**
         * Prefix for icon components.
         * Example: prefix: 'F' will generate <FHomeIcon />
         * @default ''
         */
        prefix: 'F',

        /**
         * Global default size.
         * Supports numbers (px) or strings like '1.5x' (em).
         * @default 24
         */
        size: 24,

        /**
         * Global default stroke width.
         * @default 2
         */
        strokeWidth: 2,

        /**
         * Global default CSS classes added to every icon.
         * @default ''
         */
        class: 'my-default-icon-class'
    }
})

⚖️ License

Released under the MIT by @4slan.