{"id":11259,"library":"lucide-vue-next","title":"Lucide Icons for Vue 3","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/lucide-icons/lucide","tags":["javascript","Lucide","Vue","Feather","Icons","Icon","SVG","Feather Icons","Fontawesome","typescript"],"install":[{"cmd":"npm install lucide-vue-next","lang":"bash","label":"npm"},{"cmd":"yarn add lucide-vue-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add lucide-vue-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for Vue 3 component functionality.","package":"vue","optional":false}],"imports":[{"note":"Individual icons are named exports. This package is ESM-first and primarily used in modern Vue setups (Vite, Nuxt 3).","wrong":"import Activity from 'lucide-vue-next';\n// Or\nconst Activity = require('lucide-vue-next').Activity;","symbol":"Activity","correct":"import { Activity } from 'lucide-vue-next';"},{"note":"Icon names match the kebab-case name on lucide.dev, but imported as PascalCase. No 'Icon' suffix is used in imports.","wrong":"import { BellIcon } from 'lucide-vue-next';\n// Or\nimport * as LucideIcons from 'lucide-vue-next';","symbol":"Bell","correct":"import { Bell } from 'lucide-vue-next';"},{"note":"Icons are consumed directly as Vue components after import. Props like `size`, `color`, and `stroke-width` can be passed to customize the SVG output.","symbol":"Component usage","correct":"<template>\n  <Settings :size=\"24\" color=\"red\" stroke-width=\"2\" />\n</template>\n<script setup>\nimport { Settings } from 'lucide-vue-next';\n</script>"}],"quickstart":{"code":"<template>\n  <div class=\"icon-display\">\n    <h1>Lucide Vue Icons</h1>\n    <div class=\"icons-grid\">\n      <Activity :size=\"48\" color=\"var(--activity-color, #1e90ff)\" stroke-width=\"1.5\" />\n      <BatteryCharging :size=\"48\" color=\"green\" stroke-width=\"2\" />\n      <Bell :size=\"48\" :color=\"dynamicColor\" stroke-width=\"2.5\" />\n      <Camera :size=\"48\" color=\"purple\" stroke-width=\"1\" />\n    </div>\n    <button @click=\"toggleColor\">Change Bell Color</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Activity, BatteryCharging, Bell, Camera } from 'lucide-vue-next';\n\nconst dynamicColor = ref('orange');\n\nfunction toggleColor() {\n  dynamicColor.value = dynamicColor.value === 'orange' ? 'blue' : 'orange';\n}\n</script>\n\n<style scoped>\n.icon-display {\n  font-family: sans-serif;\n  text-align: center;\n  padding: 20px;\n}\n.icons-grid {\n  display: flex;\n  gap: 20px;\n  justify-content: center;\n  margin-top: 30px;\n  margin-bottom: 20px;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates importing multiple Lucide icons as Vue components, passing props for customization, and reactively changing an icon's color."},"warnings":[{"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.","message":"Lucide 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).","severity":"gotcha","affected_versions":">=1.0.0"},{"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'`).","message":"Ensure 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use PascalCase for imported icon components in your JavaScript/TypeScript files.","message":"Icon 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The icon component was not imported or was imported with the wrong name/path.","error":"Failed to resolve component: <IconName>"},{"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.","cause":"lucide-vue-next is an ESM-first package. Attempting to `require()` it directly in a CommonJS environment without proper transpilation or configuration will fail.","error":"Uncaught ReferenceError: module is not defined (when using CommonJS)"},{"fix":"Use named imports for all icons: `import { IconName } from 'lucide-vue-next';` instead of `import IconName from 'lucide-vue-next';`.","cause":"This can occur if an icon is imported with a default import, but it is a named export.","error":"[Vue warn]: Component provided is not a function or an object: 'object'"}],"ecosystem":"npm"}