Registry / web-framework / lucide-vue-next

lucide-vue-next

library1.0.0jsnpmunverified

lucide-vue-next is the official Vue 3 implementation of Lucide, a modern, community-driven icon library that serves as a spiritual successor to Feather Icons. It provides a highly customizable and extensive collection of SVG icons specifically designed for Vue 3 applications. The library is currently stable at version 1.8.0, with frequent minor and patch releases to add new icons and address bug fixes. Key differentiators include its focus on customizability (stroke width, color, size), its tree-shakeable nature, and a large, ever-growing icon set, ensuring minimal bundle size and flexibility for developers. It leverages Vue's component system for efficient rendering and integration.

web-framework serialization

npm install lucide-vue-next

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LUCIDE-VUE-NEXT

lucide-vue-next

web-frameworkjavascriptv1.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Activity

✓ import { Activity } from 'lucide-vue-next';

✗ import Activity from 'lucide-vue-next'; // Or const Activity = require('lucide-vue-next').Activity;

Individual icons are named exports. This package is ESM-first and primarily used in modern Vue setups (Vite, Nuxt 3).

Bell

✓ import { Bell } from 'lucide-vue-next';

✗ import { BellIcon } from 'lucide-vue-next'; // Or import * as LucideIcons from 'lucide-vue-next';

Icon names match the kebab-case name on lucide.dev, but imported as PascalCase. No 'Icon' suffix is used in imports.

Component usage

✓ <template> <Settings :size="24" color="red" stroke-width="2" /> </template> <script setup> import { Settings } from 'lucide-vue-next'; </script>

Icons are consumed directly as Vue components after import. Props like `size`, `color`, and `stroke-width` can be passed to customize the SVG output.

This quickstart demonstrates importing multiple Lucide icons as Vue components, passing props for customization, and reactively changing an icon's color.

<template> <div class="icon-display"> <h1>Lucide Vue Icons</h1> <div class="icons-grid"> <Activity :size="48" color="var(--activity-color, #1e90ff)" stroke-width="1.5" /> <BatteryCharging :size="48" color="green" stroke-width="2" /> <Bell :size="48" :color="dynamicColor" stroke-width="2.5" /> <Camera :size="48" color="purple" stroke-width="1" /> </div> <button @click="toggleColor">Change Bell Color</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { Activity, BatteryCharging, Bell, Camera } from 'lucide-vue-next'; const dynamicColor = ref('orange'); function toggleColor() { dynamicColor.value = dynamicColor.value === 'orange' ? 'blue' : 'orange'; } </script> <style scoped> .icon-display { font-family: sans-serif; text-align: center; padding: 20px; } .icons-grid { display: flex; gap: 20px; justify-content: center; margin-top: 30px; margin-bottom: 20px; } </style>

Debug

Known issues

gotchaLucide icons are pure SVG. If you apply CSS styles globally that target `svg` elements, it may unintentionally affect Lucide icons' appearance (e.g., fill, stroke).

fix

Use scoped styles in Vue components or target Lucide icons specifically with more precise CSS selectors (e.g., `.lucide > svg`) to avoid global style conflicts.

affects: >=1.0.0

gotchaEnsure proper tree-shaking is configured in your build setup (e.g., Vite or Webpack) to only bundle the icons you actually use. While Lucide is designed to be tree-shakeable, incorrect configurations can lead to larger bundle sizes.

fix

Modern build tools like Vite usually handle tree-shaking automatically for ESM imports. If facing issues, verify your build tool's configuration and ensure you are importing icons individually (e.g., `import { Home } from 'lucide-vue-next'`).

affects: >=1.0.0

gotchaIcon names are PascalCase in imports (e.g., `Activity`, `Bell`) but correspond to kebab-case on the Lucide website (e.g., `activity`, `bell`). Ensure you use the correct casing for imports.

fix

Always use PascalCase for imported icon components in your JavaScript/TypeScript files.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: <IconName>

The icon component was not imported or was imported with the wrong name/path.

fix

Ensure you have `import { IconName } from 'lucide-vue-next';` at the top of your script and that `IconName` matches the PascalCase name of the icon you intend to use.

Uncaught ReferenceError: module is not defined (when using CommonJS)

lucide-vue-next is an ESM-first package. Attempting to `require()` it directly in a CommonJS environment without proper transpilation or configuration will fail.

fix

Use ESM `import` statements. If you are in a Node.js CommonJS environment, you might need to configure your bundler (e.g., Webpack) to handle ESM or use dynamic `import()` if supported.

[Vue warn]: Component provided is not a function or an object: 'object'

This can occur if an icon is imported with a default import, but it is a named export.

fix

Use named imports for all icons: `import { IconName } from 'lucide-vue-next';` instead of `import IconName from 'lucide-vue-next';`.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for Vue 3 component functionality.

Agent activity

12 hits · last 30 days

node

Resources

githubhttps://github.com/lucide-icons/lucide ↗

packagehttps://www.npmjs.com/package/lucide-vue-next ↗

homepagehttps://lucide.dev ↗