Nuxt Lucide Icons

This Nuxt module makes working with Lucide icons a breeze!

• ✨  Release Notes
• 🏀  Online playground
• 📖  Documentation
• 🖌️  Available icons

Features

• 🚠  Auto imports Lucide icons
• 🎛️  Configurable name prefix
• 🌲  Supports tree-shaking

Quick Setup

1. Add nuxt-lucide-icons dependency to your project

# Using pnpm
pnpm add -D nuxt-lucide-icons

# Using yarn
yarn add --dev nuxt-lucide-icons

# Using npm
npm install --save-dev nuxt-lucide-icons

2. Add nuxt-lucide-icons to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-lucide-icons'
  ]
})

3. That's it! You can now use all Lucide icons in your Nuxt app ✨

<template>
  <div>
    <h1>Nuxt Lucide Icons</h1>
    <LucideRocket />
    <LucideFolderGit2 color="red" />
    <LucideGithub :size="32" />
  </div>
</template>

Note: Make sure to disable your ad-blocker for local development. Some ad-blockers, such as uBlock Origin, block all subsequent requests when they detect the fingerprint icon. For more information, refer to the following issue.

Configuration

Don't like the default component name prefix? You can change it in nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-lucide-icons'
  ],

  lucide: {
    namePrefix: 'Icon'
  }
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Security

If you discover any security related issues, please email security@swis.nl instead of using the issue tracker.

Credits

• Jasper Zonneveld
• Anthony Schuijlenburg
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

SWIS ❤️ Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.