0
# Component Factory
1

2
The `createVueComponent` function enables creation of custom Vue icon components from SVG data, providing the same functionality and interface as the built-in Tabler icons. This is useful for extending the library with custom icons or integrating external icon sets.
3

4
## Capabilities
5

6
### createVueComponent Function
7

8
Factory function that creates Vue functional components for icon rendering with full prop support and Vue 3 integration.
9

10
```typescript { .api }
11
/**
12
 * Creates a Vue functional component for icon rendering
13
 * @param type - Icon style ('outline' for stroke-based, 'filled' for solid)
14
 * @param iconName - Kebab-case icon name used for CSS classes
15
 * @param iconNamePascal - PascalCase icon name (typically unused but required)  
16
 * @param iconNode - SVG structure as array of [elementName, attributes] pairs
17
 * @returns Vue functional component with IconProps interface
18
 */
19
declare function createVueComponent(
20
  type: 'outline' | 'filled',
21
  iconName: string,
22
  iconNamePascal: string,
23
  iconNode: IconNode
24
): Icon;
25

26
/**
27
 * SVG structure definition - array of element definitions
28
 * Each element is represented as [tagName, attributesObject]
29
 */
30
type IconNode = [elementName: string, attrs: Record<string, string>][];
31

32
/**
33
 * Resulting icon component type
34
 */
35
type Icon = FunctionalComponent<IconProps>;
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import { createVueComponent } from '@tabler/icons-vue';
42

43
// Create a custom outline icon
44
const IconCustomStar = createVueComponent(
45
  'outline',
46
  'custom-star',
47
  'CustomStar',
48
  [
49
    ['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' }]
50
  ]
51
);
52

53
// Create a custom filled icon
54
const IconCustomHeartFilled = createVueComponent(
55
  'filled',
56
  'custom-heart',
57
  'CustomHeart',
58
  [
59
    ['path', { d: 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' }]
60
  ]
61
);
62
```
63

64
### IconNode Structure
65

66
The `IconNode` type defines how SVG elements are represented for the component factory.
67

68
```typescript { .api }
69
/**
70
 * SVG element representation as [tagName, attributes] pairs
71
 * Supports all standard SVG elements and attributes
72
 */
73
type IconNode = [elementName: string, attrs: Record<string, string>][];
74

75
// Element types supported:
76
// - 'path': SVG path elements with 'd' attribute
77
// - 'circle': Circle elements with 'cx', 'cy', 'r' attributes  
78
// - 'rect': Rectangle elements with 'x', 'y', 'width', 'height' attributes
79
// - 'line': Line elements with 'x1', 'y1', 'x2', 'y2' attributes
80
// - 'polyline': Polyline elements with 'points' attribute
81
// - 'polygon': Polygon elements with 'points' attribute
82
// - All other standard SVG elements
83
```
84

85
**IconNode Examples:**
86

87
```typescript
88
// Simple path icon
89
const pathIcon: IconNode = [
90
  ['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' }]
91
];
92

93
// Multi-element icon
94
const complexIcon: IconNode = [
95
  ['circle', { cx: '12', cy: '12', r: '10' }],
96
  ['path', { d: 'L12 6l0 6' }],
97
  ['path', { d: 'L12 16l.01 0' }]
98
];
99

100
// Icon with multiple paths
101
const multiPathIcon: IconNode = [
102
  ['path', { d: 'M9 12l2 2l4 -4' }],
103
  ['path', { d: 'M21 12c0 4.97 -4.03 9 -9 9s-9 -4.03 -9 -9s4.03 -9 9 -9s9 4.03 9 9z' }]
104
];
105
```
106

107
### Component Type Configuration
108

109
The `type` parameter determines the icon's visual style and default attributes.
110

111
```typescript { .api }
112
/**
113
 * Icon type configuration affects default attributes and styling
114
 */
115
type IconType = 'outline' | 'filled';
116

117
// 'outline' type applies these default attributes:
118
const outlineDefaults = {
119
  xmlns: 'http://www.w3.org/2000/svg',
120
  width: 24,
121
  height: 24,
122
  viewBox: '0 0 24 24',
123
  fill: 'none',
124
  stroke: 'currentColor',
125
  'stroke-width': 2,
126
  'stroke-linecap': 'round',
127
  'stroke-linejoin': 'round'
128
};
129

130
// 'filled' type applies these default attributes:
131
const filledDefaults = {
132
  xmlns: 'http://www.w3.org/2000/svg',
133
  width: 24,
134
  height: 24,
135
  viewBox: '0 0 24 24',
136
  fill: 'currentColor',
137
  stroke: 'none'
138
};
139
```
140

141
### Generated Component Features
142

143
Components created by `createVueComponent` have the same capabilities as built-in Tabler icons.
144

145
```typescript { .api }
146
/**
147
 * Generated components support all standard icon props
148
 */
149
interface GeneratedIconProps extends IconProps {
150
  /** Size control (width and height) */
151
  size?: string | number; // Default: 24
152
  /** Color control (stroke for outline, fill for filled) */
153
  stroke?: string | number; // Default: 'currentColor'  
154
  /** Accessibility title */
155
  title?: string;
156
  /** CSS classes */
157
  class?: string | string[] | Record<string, boolean>;
158
  /** Style attributes */
159
  style?: string | Record<string, string>;
160
  /** All other SVG attributes */
161
  [key: string]: any;
162
}
163
```
164

165
**Generated Component Usage Examples:**
166

167
```vue
168
<template>
169
  <!-- Use custom component like any Tabler icon -->
170
  <IconCustomStar />
171
  
172
  <!-- With props -->
173
  <IconCustomStar 
174
    color="gold" 
175
    size="32" 
176
    stroke-width="1.5"
177
  />
178
  
179
  <!-- With events -->
180
  <IconCustomStar @click="handleStarClick" />
181
  
182
  <!-- With CSS classes -->
183
  <IconCustomStar class="favorite-star" />
184
</template>
185

186
<script setup>
187
import { createVueComponent } from '@tabler/icons-vue';
188

189
const IconCustomStar = createVueComponent(
190
  'outline',
191
  'custom-star', 
192
  'CustomStar',
193
  [['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' }]]
194
);
195

196
function handleStarClick() {
197
  console.log('Custom star clicked');
198
}
199
</script>
200
```
201

202
### CSS Class Generation
203

204
Custom components automatically receive CSS classes based on the provided `iconName`.
205

206
```typescript { .api }
207
/**
208
 * Automatic CSS class generation for custom components
209
 * Classes follow the same pattern as built-in icons
210
 */
211
// Component created with iconName: 'custom-star'
212
// Receives classes: 'tabler-icon tabler-icon-custom-star'
213

214
// Component created with iconName: 'my-special-icon'  
215
// Receives classes: 'tabler-icon tabler-icon-my-special-icon'
216
```
217

218
**CSS Styling for Custom Icons:**
219

220
```css
221
/* Style all custom icons */
222
.tabler-icon-custom-star {
223
  color: gold;
224
  transition: transform 0.2s ease;
225
}
226

227
.tabler-icon-custom-star:hover {
228
  transform: scale(1.1);
229
}
230

231
/* Style custom filled icons differently */
232
.tabler-icon[class*="custom-"] {
233
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
234
}
235
```
236

237
### Integration with Icon Sets
238

239
`createVueComponent` can be used to integrate external icon sets or convert SVG files to Vue components.
240

241
**Usage Examples:**
242

243
```typescript
244
import { createVueComponent } from '@tabler/icons-vue';
245

246
// Convert Heroicons to Tabler-compatible components
247
const IconHeroHome = createVueComponent(
248
  'outline',
249
  'hero-home',
250
  'HeroHome',
251
  [['path', { 
252
    'stroke-linecap': 'round', 
253
    'stroke-linejoin': 'round', 
254
    'd': 'M3 7l3-3 6 6 6-6 3 3v13a1 1 0 01-1 1H4a1 1 0 01-1-1V7z'
255
  }]]
256
);
257

258
// Convert Feather icons
259
const IconFeatherEdit = createVueComponent(
260
  'outline',
261
  'feather-edit',
262
  'FeatherEdit', 
263
  [
264
    ['path', { d: 'M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' }],
265
    ['path', { d: 'm18.5 2.5 a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z' }]
266
  ]
267
);
268

269
// Batch create icons from icon set data
270
function createIconsFromSet(iconSetData: Record<string, IconNode>) {
271
  const components: Record<string, Icon> = {};
272
  
273
  Object.entries(iconSetData).forEach(([name, iconNode]) => {
274
    const componentName = `Icon${name.charAt(0).toUpperCase()}${name.slice(1)}`;
275
    components[componentName] = createVueComponent('outline', name, componentName, iconNode);
276
  });
277
  
278
  return components;
279
}
280
```
281

282
### Advanced Usage Patterns
283

284
Complex SVG icons with animations, gradients, or special effects can be created using the component factory.
285

286
**Usage Examples:**
287

288
```typescript
289
// Icon with gradient (requires defs)
290
const IconGradientStar = createVueComponent(
291
  'filled',
292
  'gradient-star',
293
  'GradientStar',
294
  [
295
    ['defs', {}],
296
    ['linearGradient', { id: 'starGradient', x1: '0%', y1: '0%', x2: '100%', y2: '100%' }],
297
    ['stop', { offset: '0%', 'stop-color': '#ff6b6b' }],
298
    ['stop', { offset: '100%', 'stop-color': '#4ecdc4' }],
299
    ['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', fill: 'url(#starGradient)' }]
300
  ]
301
);
302

303
// Icon with animation attributes
304
const IconSpinner = createVueComponent(
305
  'outline',
306
  'spinner',
307
  'Spinner',
308
  [
309
    ['path', { 
310
      d: 'M12 3a9 9 0 0 1 9 9 9 9 0 0 1-9 9 9 9 0 0 1-9-9',
311
      'stroke-dasharray': '27',
312
      'stroke-dashoffset': '27'
313
    }]
314
  ]
315
);
316
```