0
# TypeScript Support
1

2
@tabler/icons-vue provides comprehensive TypeScript definitions for all components, interfaces, and utility functions with complete Vue 3 integration and type safety throughout the API.
3

4
## Capabilities
5

6
### Component Type Definitions
7

8
All icon components are properly typed as Vue functional components with consistent interfaces.
9

10
```typescript { .api }
11
/**
12
 * Base functional component type for all icons
13
 * Integrates with Vue 3's type system for proper component typing
14
 */
15
type Icon = FunctionalComponent<IconProps>;
16

17
/**
18
 * Import types for proper TypeScript usage
19
 */
20
import type { FunctionalComponent, SVGAttributes } from 'vue';
21
```
22

23
**Usage Examples:**
24

25
```typescript
26
import type { Icon } from '@tabler/icons-vue';
27
import { IconHome, IconSettings } from '@tabler/icons-vue';
28

29
// Type-safe icon component usage
30
const homeIcon: Icon = IconHome;
31
const settingsIcon: Icon = IconSettings;
32

33
// In Vue components
34
export default defineComponent({
35
  components: {
36
    IconHome,
37
    IconSettings
38
  }
39
});
40
```
41

42
### IconProps Interface
43

44
Complete type definition for all icon component properties with Vue-compatible naming.
45

46
```typescript { .api }
47
/**
48
 * Props interface for all icon components
49
 * Extends SVGAttributes but replaces 'stroke' for Vue compatibility
50
 */
51
interface IconProps extends Partial<Omit<SVGAttributes, 'stroke'>> {
52
  /** Icon size in pixels (width and height) - Default: 24 */
53
  size?: string | number;
54
  /** Stroke color for outline icons or fill color for filled icons - Default: 'currentColor' */
55
  stroke?: string | number;
56
  /** Accessibility title element content */
57
  title?: string;
58
}
59

60
/**
61
 * Alternative props interface with explicit Vue SVG attributes
62
 */
63
interface SVGProps extends Partial<SVGAttributes> {
64
  /** Icon size with default type support */
65
  size?: 24 | number | string;
66
  /** Stroke width for outline icons */
67
  strokeWidth?: number | string;
68
}
69
```
70

71
**Usage Examples:**
72

73
```vue
74
<template>
75
  <IconHome v-bind="homeIconProps" />
76
  <IconSettings :size="settingsSize" :stroke="themeColor" />
77
</template>
78

79
<script setup lang="ts">
80
import { IconHome, IconSettings } from '@tabler/icons-vue';
81
import type { IconProps } from '@tabler/icons-vue';
82

83
// Type-safe prop objects
84
const homeIconProps: IconProps = {
85
  size: 24,
86
  stroke: 'blue',
87
  title: 'Home Page'
88
};
89

90
// Type-safe reactive properties
91
const settingsSize: Ref<number> = ref(32);
92
const themeColor: Ref<string> = ref('currentColor');
93
</script>
94
```
95

96
### Component Factory Types
97

98
Complete type definitions for the `createVueComponent` function and related interfaces.
99

100
```typescript { .api }
101
/**
102
 * Component factory function signature with full type safety
103
 */
104
declare function createVueComponent(
105
  type: 'outline' | 'filled',
106
  iconName: string,
107
  iconNamePascal: string,
108
  iconNode: IconNode
109
): Icon;
110

111
/**
112
 * SVG element structure definition
113
 * Array of [elementName, attributes] tuples for type-safe SVG construction
114
 */
115
type IconNode = [elementName: string, attrs: Record<string, string>][];
116

117
/**
118
 * Icon type enumeration for component factory
119
 */
120
type IconType = 'outline' | 'filled';
121
```
122

123
**Usage Examples:**
124

125
```typescript
126
import { createVueComponent } from '@tabler/icons-vue';
127
import type { IconNode, Icon } from '@tabler/icons-vue';
128

129
// Type-safe custom icon creation
130
const customIconNode: IconNode = [
131
  ['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' }]
132
];
133

134
const IconCustomStar: Icon = createVueComponent(
135
  'outline',
136
  'custom-star',
137
  'CustomStar',
138
  customIconNode
139
);
140

141
// Function to create multiple icons with type safety
142
function createIconSet(iconData: Record<string, IconNode>): Record<string, Icon> {
143
  const icons: Record<string, Icon> = {};
144
  
145
  Object.entries(iconData).forEach(([name, node]) => {
146
    const componentName = `Icon${name.charAt(0).toUpperCase()}${name.slice(1)}`;
147
    icons[componentName] = createVueComponent('outline', name, componentName, node);
148
  });
149
  
150
  return icons;
151
}
152
```
153

154
### Default Attributes Types
155

156
Type definitions for the default SVG attributes applied to outline and filled icons.
157

158
```typescript { .api }
159
/**
160
 * Default attributes configuration for different icon types
161
 */
162
interface DefaultAttributes {
163
  outline: {
164
    xmlns: 'http://www.w3.org/2000/svg';
165
    width: 24;
166
    height: 24;
167
    viewBox: '0 0 24 24';
168
    fill: 'none';
169
    stroke: 'currentColor';
170
    'stroke-width': 2;
171
    'stroke-linecap': 'round';
172
    'stroke-linejoin': 'round';
173
  };
174
  filled: {
175
    xmlns: 'http://www.w3.org/2000/svg';
176
    width: 24;
177
    height: 24;
178
    viewBox: '0 0 24 24';
179
    fill: 'currentColor';
180
    stroke: 'none';
181
  };
182
}
183

184
/**
185
 * Export of default attributes object
186
 */
187
declare const defaultAttributes: DefaultAttributes;
188
```
189

190
### Vue 3 Integration Types
191

192
Proper integration with Vue 3's type system for optimal development experience.
193

194
```typescript { .api }
195
/**
196
 * Vue 3 component instance type for icon components
197
 */
198
type IconComponentInstance = ComponentPublicInstance<IconProps>;
199

200
/**
201
 * Template ref type for icon components
202
 */
203
type IconRef = Ref<IconComponentInstance | null>;
204

205
/**
206
 * Event handler types for icon components
207
 */
208
interface IconEventHandlers {
209
  onClick?: (event: MouseEvent) => void;
210
  onMouseenter?: (event: MouseEvent) => void;
211
  onMouseleave?: (event: MouseEvent) => void;
212
  onKeydown?: (event: KeyboardEvent) => void;
213
  onFocus?: (event: FocusEvent) => void;
214
  onBlur?: (event: FocusEvent) => void;
215
}
216
```
217

218
**Vue 3 Integration Examples:**
219

220
```vue
221
<template>
222
  <IconHome 
223
    ref="homeIconRef"
224
    @click="handleHomeClick"
225
    @keydown="handleKeyDown"
226
  />
227
</template>
228

229
<script setup lang="ts">
230
import { ref } from 'vue';
231
import { IconHome } from '@tabler/icons-vue';
232
import type { IconRef, IconEventHandlers } from '@tabler/icons-vue';
233

234
// Type-safe template refs
235
const homeIconRef: IconRef = ref(null);
236

237
// Type-safe event handlers
238
const eventHandlers: IconEventHandlers = {
239
  onClick: (event: MouseEvent) => {
240
    console.log('Home clicked', event);
241
  },
242
  onKeydown: (event: KeyboardEvent) => {
243
    if (event.key === 'Enter') {
244
      console.log('Home activated via keyboard');
245
    }
246
  }
247
};
248

249
function handleHomeClick(event: MouseEvent) {
250
  console.log('Home icon clicked', event.target);
251
}
252

253
function handleKeyDown(event: KeyboardEvent) {
254
  if (event.key === 'Enter') {
255
    handleHomeClick(event as any);
256
  }
257
}
258
</script>
259
```
260

261
### Generic Type Utilities
262

263
Utility types for working with icon components in generic contexts.
264

265
```typescript { .api }
266
/**
267
 * Extract icon name from component type
268
 */
269
type IconName<T extends Icon> = T extends Icon ? string : never;
270

271
/**
272
 * Union type of all available icon types
273
 */
274
type AvailableIconTypes = 'outline' | 'filled';
275

276
/**
277
 * Props type for specific icon styles
278
 */
279
type OutlineIconProps = IconProps & {
280
  strokeWidth?: number | string;
281
};
282

283
type FilledIconProps = Omit<IconProps, 'strokeWidth'>;
284

285
/**
286
 * Conditional props based on icon type
287
 */
288
type ConditionalIconProps<T extends AvailableIconTypes> = 
289
  T extends 'outline' ? OutlineIconProps : FilledIconProps;
290
```
291

292
**Generic Usage Examples:**
293

294
```typescript
295
import type { Icon, AvailableIconTypes, ConditionalIconProps } from '@tabler/icons-vue';
296

297
// Generic icon component wrapper
298
function createIconWrapper<T extends AvailableIconTypes>(
299
  iconType: T,
300
  props: ConditionalIconProps<T>
301
) {
302
  // Type-safe logic based on icon type
303
  if (iconType === 'outline') {
304
    // props is typed as OutlineIconProps
305
    console.log('Stroke width:', (props as OutlineIconProps).strokeWidth);
306
  } else {
307
    // props is typed as FilledIconProps (no strokeWidth)
308
    console.log('Filled icon props:', props);
309
  }
310
}
311

312
// Usage with type inference
313
createIconWrapper('outline', { 
314
  size: 24, 
315
  stroke: 'blue', 
316
  strokeWidth: 1.5 // Type-safe for outline icons
317
});
318

319
createIconWrapper('filled', { 
320
  size: 24, 
321
  stroke: 'red'
322
  // strokeWidth not available for filled icons
323
});
324
```
325

326
### Module Declaration
327

328
Complete module declaration for importing types and components.
329

330
```typescript { .api }
331
/**
332
 * Module declaration for @tabler/icons-vue
333
 */
334
declare module '@tabler/icons-vue' {
335
  // Component exports
336
  export const IconHome: Icon;
337
  export const IconHomeFilled: Icon;
338
  export const IconSettings: Icon;
339
  export const IconSettingsFilled: Icon;
340
  // ... all other icon components
341

342
  // Utility exports  
343
  export const createVueComponent: typeof createVueComponent;
344
  export const defaultAttributes: DefaultAttributes;
345
  
346
  // Type exports
347
  export type {
348
    Icon,
349
    IconProps,
350
    SVGProps,
351
    IconNode,
352
    DefaultAttributes,
353
    AvailableIconTypes,
354
    ConditionalIconProps
355
  };
356

357
  // Namespace exports
358
  export * as icons from './icons/index';
359
  export * as iconsList from './icons-list';
360
  export * from './aliases';
361
}
362
```
363

364
### Type Safety Best Practices
365

366
Recommended patterns for type-safe usage of @tabler/icons-vue.
367

368
**Best Practice Examples:**
369

370
```typescript
371
// 1. Use explicit typing for component props
372
import type { IconProps } from '@tabler/icons-vue';
373

374
const iconConfig: IconProps = {
375
  size: 24,
376
  stroke: 'currentColor',
377
  title: 'Navigation icon'
378
};
379

380
// 2. Type-safe dynamic icon selection
381
import { IconHome, IconSettings, IconUser } from '@tabler/icons-vue';
382
import type { Icon } from '@tabler/icons-vue';
383

384
const iconMap: Record<string, Icon> = {
385
  home: IconHome,
386
  settings: IconSettings,
387
  user: IconUser
388
};
389

390
function getIcon(name: keyof typeof iconMap): Icon {
391
  return iconMap[name];
392
}
393

394
// 3. Component wrapper with proper typing
395
import { defineComponent, type PropType } from 'vue';
396
import type { Icon, IconProps } from '@tabler/icons-vue';
397

398
const IconWrapper = defineComponent({
399
  props: {
400
    icon: {
401
      type: Object as PropType<Icon>,
402
      required: true
403
    },
404
    iconProps: {
405
      type: Object as PropType<IconProps>,
406
      default: () => ({})
407
    }
408
  },
409
  setup(props) {
410
    return () => h(props.icon, props.iconProps);
411
  }
412
});
413

414
// 4. Typed composable for icon management
415
function useIcons() {
416
  const currentIcon: Ref<Icon | null> = ref(null);
417
  
418
  function setIcon(icon: Icon) {
419
    currentIcon.value = icon;
420
  }
421
  
422
  function clearIcon() {
423
    currentIcon.value = null;
424
  }
425
  
426
  return {
427
    currentIcon: readonly(currentIcon),
428
    setIcon,
429
    clearIcon
430
  };
431
}
432
```