{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install lucide-vue-next"],"cli":null},"imports":["import { Activity } from 'lucide-vue-next';","import { Bell } from 'lucide-vue-next';","<template>\n  <Settings :size=\"24\" color=\"red\" stroke-width=\"2\" />\n</template>\n<script setup>\nimport { Settings } from 'lucide-vue-next';\n</script>"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}