0
# @tabler/icons-vue
1

2
@tabler/icons-vue provides Vue 3 components for the Tabler Icons library. It transforms over 5,900 high-quality SVG icons into tree-shakable Vue components with customizable properties, supporting both outline and filled styles with full TypeScript integration.
3

4
## Package Information
5

6
- **Package Name**: @tabler/icons-vue
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Framework**: Vue 3
10
- **Installation**: `npm install @tabler/icons-vue` or `pnpm install @tabler/icons-vue`
11

12
## Core Imports
13

14
```vue
15
<script setup>
16
import { IconHome, IconSettings, IconUser } from '@tabler/icons-vue';
17
</script>
18
```
19

20
For CommonJS:
21

22
```javascript
23
const { IconHome, IconSettings, IconUser } = require('@tabler/icons-vue');
24
```
25

26
Import filled versions:
27

28
```vue
29
<script setup>
30
import { IconHomeFilled, IconSettingsFilled } from '@tabler/icons-vue';
31
</script>
32
```
33

34
Namespace imports:
35

36
```javascript
37
import { icons, iconsList } from '@tabler/icons-vue';
38

39
// Use icons namespace
40
const HomeIcon = icons.IconHome;
41
const SettingsIcon = icons.IconSettings;
42

43
// Access icon metadata
44
console.log(iconsList); // Array/object with icon information
45
```
46

47
## Basic Usage
48

49
```vue
50
<template>
51
  <!-- Basic icon usage -->
52
  <IconHome />
53
  
54
  <!-- Customized icon with props -->
55
  <IconHome 
56
    color="red" 
57
    size="32" 
58
    stroke-width="1.5"
59
    title="Home Page"
60
  />
61
  
62
  <!-- Filled icon variant -->
63
  <IconHomeFilled color="blue" size="24" />
64
  
65
  <!-- Event handling -->
66
  <IconSettings @click="openSettings" />
67
  
68
  <!-- Custom CSS classes -->
69
  <IconUser class="user-icon" />
70
</template>
71

72
<script setup>
73
import { IconHome, IconHomeFilled, IconSettings, IconUser } from '@tabler/icons-vue';
74

75
function openSettings() {
76
  console.log('Settings clicked');
77
}
78
</script>
79
```
80

81
## Architecture
82

83
@tabler/icons-vue is built around several key components:
84

85
- **Icon Components**: 5,945 pre-built Vue functional components (4,964 outline + 981 filled)
86
- **Component Factory**: `createVueComponent` function for custom icon creation
87
- **Type System**: Full TypeScript definitions with proper Vue component typing
88
- **Props System**: Consistent prop interface across all icon components
89
- **Build System**: Automated generation from SVG files with tree-shaking support
90
- **Alias System**: Alternative names for backward compatibility (100+ aliases)
91

92
## Capabilities
93

94
### Icon Components
95

96
Individual Vue components for each Tabler icon, available in outline and filled variants. Each component is fully typed and supports all standard Vue component features.
97

98
```typescript { .api }
99
// Outline icons (default style)
100
declare const IconHome: FunctionalComponent<SVGProps>;
101
declare const IconSettings: FunctionalComponent<SVGProps>;
102
declare const IconUser: FunctionalComponent<SVGProps>;
103

104
// Filled icons (solid style)
105
declare const IconHomeFilled: FunctionalComponent<SVGProps>;
106
declare const IconSettingsFilled: FunctionalComponent<SVGProps>;
107

108
interface SVGProps extends Partial<SVGAttributes> {
109
  size?: 24 | number | string;
110
  strokeWidth?: number | string;
111
}
112

113
interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
114
  size?: string | number; // Default: 24
115
  stroke?: string | number; // Color for outline icons, default: 'currentColor'
116
  title?: string; // Accessibility title
117
}
118
```
119

120
[Icon Components](./icon-components.md)
121

122
### Icons Namespace
123

124
All icon components grouped under `icons` namespace for alternative import patterns and dynamic access.
125

126
```typescript { .api }
127
declare const icons: {
128
  IconHome: FunctionalComponent<SVGProps>;
129
  IconHomeFilled: FunctionalComponent<SVGProps>;
130
  IconSettings: FunctionalComponent<SVGProps>;
131
  IconSettingsFilled: FunctionalComponent<SVGProps>;
132
  // ... all 5,945 icon components
133
};
134
```
135

136
### Icons List
137

138
Metadata and comprehensive list of all available icons for dynamic icon selection and discovery.
139

140
```typescript { .api }
141
declare const iconsList: IconMetadata[] | Record<string, IconMetadata>;
142

143
interface IconMetadata {
144
  name: string;
145
  category?: string;
146
  tags?: string[];
147
  unicode?: string;
148
}
149
```
150

151
### Icon Aliases
152

153
Alternative names for icon components to support backward compatibility and common naming patterns.
154

155
```typescript { .api }
156
// Icon aliases are exported directly as named exports
157
// Examples:
158
declare const IconArrowUp: FunctionalComponent<SVGProps>; // Alias for IconChevronUp
159
declare const IconCheck: FunctionalComponent<SVGProps>; // Alias for IconCheckmark
160
// ... over 100 icon aliases available
161
```
162

163
### Component Factory
164

165
Factory function for creating custom Vue icon components from SVG data or for extending the library with custom icons.
166

167
```typescript { .api }
168
declare function createVueComponent(
169
  type: 'outline' | 'filled',
170
  iconName: string,
171
  iconNamePascal: string,
172
  iconNode: IconNode
173
): Icon;
174

175
type IconNode = [elementName: string, attrs: Record<string, string>][];
176
type Icon = FunctionalComponent<SVGProps>;
177
```
178

179
[Component Factory](./component-factory.md)
180

181
### TypeScript Support
182

183
Complete TypeScript definitions for all components, interfaces, and utility functions with full Vue 3 integration.
184

185
```typescript { .api }
186
interface SVGProps extends Partial<SVGAttributes> {
187
  size?: 24 | number | string;
188
  strokeWidth?: number | string;
189
}
190

191
interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
192
  size?: string | number;
193
  stroke?: string | number;
194
  title?: string;
195
}
196

197
type IconNode = [elementName: string, attrs: Record<string, string>][];
198
type Icon = FunctionalComponent<SVGProps>;
199
```
200

201
[TypeScript Support](./typescript-support.md)
202

203
## Types
204

205
```typescript { .api }
206
interface IconProps extends Partial<Omit<SVGProps, 'stroke'>> {
207
  /** Icon size in pixels (width and height) */
208
  size?: string | number;
209
  /** Stroke color for outline icons or fill color for filled icons */
210
  stroke?: string | number;
211
  /** Accessibility title element content */
212
  title?: string;
213
}
214

215
interface SVGProps extends Partial<SVGAttributes> {
216
  size?: 24 | number | string;
217
  strokeWidth?: number | string;
218
}
219

220
type IconNode = [elementName: string, attrs: Record<string, string>][];
221

222
type Icon = FunctionalComponent<SVGProps>;
223
```