0
# Core Icon Rendering
1
2
Base functionality for rendering SVG icons from data structures. The `Icon` component provides the foundation for all icon components and enables direct rendering of custom icon data.
3
4
## Capabilities
5
6
### Icon Component
7
8
The core SVG icon renderer that all individual icon components use internally. Accepts icon data and renders it as a customizable SVG element.
9
10
```typescript { .api }
11
/**
12
* Core SVG icon renderer component
13
* Renders SVG icons from IconNode data structures with customizable properties
14
*/
15
const Icon: FunctionalComponent<LucideProps & IconProps>;
16
17
interface IconProps {
18
/** SVG element data structure defining the icon's paths and shapes */
19
iconNode: IconNode;
20
/** Icon name used for CSS class generation */
21
name: string;
22
}
23
24
interface LucideProps extends Partial<SVGAttributes> {
25
/** Icon size in pixels (both width and height), defaults to 24 */
26
size?: 24 | number;
27
/** Stroke width for icon lines */
28
strokeWidth?: number | string;
29
/** Disable automatic stroke width scaling based on icon size */
30
absoluteStrokeWidth?: boolean;
31
/** Kebab-case version of absoluteStrokeWidth */
32
'absolute-stroke-width'?: boolean;
33
}
34
35
type IconNode = [elementName: string, attrs: Record<string, string>][];
36
```
37
38
**Usage Examples:**
39
40
```vue
41
<template>
42
<div>
43
<!-- Basic icon rendering -->
44
<Icon
45
:icon-node="heartIcon"
46
name="heart"
47
/>
48
49
<!-- Customized icon -->
50
<Icon
51
:icon-node="starIcon"
52
name="star"
53
:size="32"
54
color="gold"
55
:stroke-width="2"
56
/>
57
58
<!-- Icon with absolute stroke width -->
59
<Icon
60
:icon-node="circleIcon"
61
name="circle"
62
:size="48"
63
:absolute-stroke-width="true"
64
:stroke-width="1"
65
/>
66
67
<!-- Icon with slots for custom content -->
68
<Icon
69
:icon-node="squareIcon"
70
name="square"
71
:size="40"
72
>
73
<text x="20" y="25" text-anchor="middle" font-size="12">42</text>
74
</Icon>
75
</div>
76
</template>
77
78
<script setup>
79
import { Icon } from "lucide-vue-next";
80
81
// Define custom icon data
82
const heartIcon = [
83
['path', {
84
d: 'M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z',
85
key: 'heartpath'
86
}]
87
];
88
89
const starIcon = [
90
['polygon', {
91
points: '12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26',
92
key: 'starpath'
93
}]
94
];
95
96
const circleIcon = [
97
['circle', { cx: '12', cy: '12', r: '10', key: 'circlepath' }]
98
];
99
100
const squareIcon = [
101
['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2', key: 'squarepath' }]
102
];
103
</script>
104
```
105
106
### Default Attributes
107
108
All icons rendered through the `Icon` component receive consistent default SVG attributes that can be overridden via props.
109
110
```typescript { .api }
111
// Default attributes applied to all rendered icons:
112
const defaultAttributes = {
113
xmlns: 'http://www.w3.org/2000/svg',
114
width: 24,
115
height: 24,
116
viewBox: '0 0 24 24',
117
fill: 'none',
118
stroke: 'currentColor',
119
'stroke-width': 2,
120
'stroke-linecap': 'round',
121
'stroke-linejoin': 'round',
122
};
123
```
124
125
### CSS Class Generation
126
127
The `Icon` component automatically generates CSS classes for styling and identification:
128
129
```typescript { .api }
130
// Generated CSS classes:
131
// - 'lucide' (always present)
132
// - 'lucide-{name}-icon' (e.g., 'lucide-heart-icon')
133
// - 'lucide-{kebab-case-name}' (e.g., 'lucide-heart')
134
// - Any additional classes passed via the 'class' prop
135
```
136
137
**CSS Class Examples:**
138
139
```vue
140
<template>
141
<!-- This Icon generates classes: lucide, lucide-heart-icon, lucide-heart, custom-heart -->
142
<Icon
143
:icon-node="heartIcon"
144
name="heart"
145
class="custom-heart"
146
/>
147
148
<!-- This Icon generates classes: lucide, lucide-arrow-up-icon, lucide-arrow-up -->
149
<Icon
150
:icon-node="arrowUpIcon"
151
name="arrowUp"
152
/>
153
</template>
154
```
155
156
### Stroke Width Scaling
157
158
The `Icon` component provides intelligent stroke width scaling based on icon size, with options to disable this behavior.
159
160
```typescript { .api }
161
// Automatic scaling (default behavior):
162
// strokeWidth is scaled proportionally with icon size
163
// Formula: (strokeWidth * 24) / size
164
165
// Absolute stroke width (disabled scaling):
166
// strokeWidth remains constant regardless of icon size
167
// Enabled via absoluteStrokeWidth or 'absolute-stroke-width' props
168
```
169
170
**Stroke Width Examples:**
171
172
```vue
173
<template>
174
<div>
175
<!-- Scaled stroke width (default) -->
176
<Icon :icon-node="lineIcon" name="line" :size="48" :stroke-width="2" />
177
<!-- Results in actual stroke-width="1" (2 * 24 / 48) -->
178
179
<!-- Absolute stroke width -->
180
<Icon
181
:icon-node="lineIcon"
182
name="line"
183
:size="48"
184
:stroke-width="2"
185
:absolute-stroke-width="true"
186
/>
187
<!-- Results in actual stroke-width="2" -->
188
189
<!-- Kebab-case syntax -->
190
<Icon
191
:icon-node="lineIcon"
192
name="line"
193
:size="48"
194
stroke-width="2"
195
absolute-stroke-width
196
/>
197
<!-- Also results in actual stroke-width="2" -->
198
</div>
199
</template>
200
```
201
202
### Slots Support
203
204
The `Icon` component supports Vue slots for adding custom content inside the SVG element.
205
206
```vue
207
<template>
208
<Icon :icon-node="backgroundIcon" name="background">
209
<!-- Custom content rendered inside the SVG -->
210
<text x="12" y="16" text-anchor="middle" font-size="8" fill="white">
211
Badge
212
</text>
213
<circle cx="18" cy="6" r="3" fill="red" />
214
</Icon>
215
</template>
216
```