0
# Lucide Vue Next
1

2
Lucide Vue Next is a comprehensive Vue 3 icon library that provides access to 1,600+ beautiful, customizable SVG icons from the Lucide icon set. It offers both individual icon components and utility functions for creating custom icon components, with full TypeScript support, tree-shaking capabilities, and seamless integration with Vue 3's Composition API.
3

4
## Package Information
5

6
- **Package Name**: lucide-vue-next
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install lucide-vue-next`
10

11
## Core Imports
12

13
```typescript
14
import { Icon, createLucideIcon, Smile, Activity } from "lucide-vue-next";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Icon, createLucideIcon, Smile, Activity } = require("lucide-vue-next");
21
```
22

23
Namespace import for all icons:
24

25
```typescript
26
import { icons } from "lucide-vue-next";
27
// Use as: icons.Smile, icons.Activity, etc.
28
```
29

30
## Basic Usage
31

32
```vue
33
<template>
34
  <div>
35
    <!-- Basic icon usage -->
36
    <Smile />
37
    
38
    <!-- Customized icon -->
39
    <Activity 
40
      :size="32" 
41
      color="blue" 
42
      :stroke-width="1.5" 
43
    />
44
    
45
    <!-- Using Icon component directly -->
46
    <Icon 
47
      :icon-node="customIconData" 
48
      name="custom-icon"
49
      :size="24" 
50
    />
51
    
52
    <!-- Icon with slots for custom content -->
53
    <Smile :size="24">
54
      <text x="12" y="18" text-anchor="middle" font-size="8">New</text>
55
    </Smile>
56
  </div>
57
</template>
58

59
<script setup>
60
import { Smile, Activity, Icon } from "lucide-vue-next";
61

62
const customIconData = [
63
  ['path', { d: 'M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' }]
64
];
65
</script>
66
```
67

68
## Architecture
69

70
Lucide Vue Next is built around several key architectural components:
71

72
- **Icon Components**: 1,600+ pre-built Vue functional components, one for each Lucide icon
73
- **Base Icon Renderer**: Core `Icon` component that renders SVG icons from data structures
74
- **Icon Factory**: `createLucideIcon` function for generating custom icon components
75
- **Type System**: Full TypeScript integration with props interfaces and icon data types
76
- **Build System**: Automated generation of icon components from SVG sources during build
77
- **Alias System**: Backward compatibility through deprecated icon name aliases
78

79
## Capabilities
80

81
### Individual Icon Components
82

83
Access to 1,600+ pre-built icon components with consistent Vue 3 functional component interface. Each icon supports all standard SVG properties plus library-specific customization options.
84

85
```typescript { .api }
86
// Example icon components (representative of all 1,600+ icons)
87
const Smile: FunctionalComponent<LucideProps>;
88
const Activity: FunctionalComponent<LucideProps>;
89
const Accessibility: FunctionalComponent<LucideProps>;
90
const AArrowDown: FunctionalComponent<LucideProps>;
91
// ... 1,600+ more icon components
92
```
93

94
[Icon Components](./icon-components.md)
95

96
### Core Icon Rendering
97

98
Base functionality for rendering SVG icons from data structures. Provides the foundation for all icon components and enables custom icon creation.
99

100
```typescript { .api }
101
const Icon: FunctionalComponent<LucideProps & IconProps>;
102

103
interface IconProps {
104
  /** SVG element data structure defining the icon's paths and shapes */
105
  iconNode: IconNode;
106
  /** Icon name used for CSS class generation */
107
  name: string;
108
}
109

110
interface LucideProps extends Partial<SVGAttributes> {
111
  /** Icon size in pixels (both width and height), defaults to 24 */
112
  size?: 24 | number;
113
  /** Stroke width for icon lines */
114
  strokeWidth?: number | string;
115
  /** Disable automatic stroke width scaling based on icon size */
116
  absoluteStrokeWidth?: boolean;
117
  /** Kebab-case version of absoluteStrokeWidth */
118
  'absolute-stroke-width'?: boolean;
119
}
120
```
121

122
[Core Rendering](./core-rendering.md)
123

124
### Icon Factory
125

126
Factory function for creating custom icon components from SVG data structures. Essential for building icon libraries or integrating custom SVG content.
127

128
```typescript { .api }
129
function createLucideIcon(
130
  iconName: string, 
131
  iconNode: IconNode
132
): FunctionalComponent<LucideProps>;
133

134
type IconNode = [elementName: string, attrs: Record<string, string>][];
135
```
136

137
[Icon Factory](./icon-factory.md)
138

139
## Types
140

141
```typescript { .api }
142
interface LucideProps extends Partial<SVGAttributes> {
143
  /** Icon size in pixels (both width and height), defaults to 24 */
144
  size?: 24 | number;
145
  /** Stroke width for icon lines */
146
  strokeWidth?: number | string;
147
  /** Disable automatic stroke width scaling based on icon size */
148
  absoluteStrokeWidth?: boolean;
149
  /** Kebab-case version of absoluteStrokeWidth */
150
  'absolute-stroke-width'?: boolean;
151
}
152

153
type IconNode = [elementName: string, attrs: Record<string, string>][];
154
type LucideIcon = FunctionalComponent<LucideProps>;
155
type SVGProps = LucideProps; // Legacy alias
156
```