Nuxt Lucide Icons

This Nuxt module makes working with Lucide icons a breeze!

Features

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

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add lucide-icons

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

Change log

Please see CHANGELOG for more information on what has changed recently.

Contributing

Local 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

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

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.