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:
✨ 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'
}
})