0
# Component Resolver
1

2
Automatic component resolution for unplugin-vue-components and unplugin-auto-import integration, enabling automatic component registration and importing.
3

4
## Capabilities
5

6
### ComponentsResolver Function
7

8
Main resolver function for automatic component registration.
9

10
```typescript { .api }
11
/**
12
 * Resolver for unplugin-vue-components and unplugin-auto-import
13
 * @param options - Configuration options for the resolver
14
 * @returns Resolver function that maps component names to import paths
15
 */
16
function ComponentsResolver(options?: ComponentResolverOption): (name: string) => string | undefined;
17
```
18

19
### ComponentResolverOption Interface
20

21
Configuration options for customizing component resolution behavior.
22

23
```typescript { .api }
24
/**
25
 * Configuration options for ComponentsResolver
26
 */
27
interface ComponentResolverOption {
28
  /** Prefix for resolving components name. Set '' to disable prefix (default: 'i') */
29
  prefix?: string | false;
30
  
31
  /** Iconify collection names to enable for resolving (default: all collections) */
32
  enabledCollections?: string | string[];
33
  
34
  /** Icon collections aliases. The keys are aliases, values are collection names */
35
  alias?: Record<string, string>;
36
  
37
  /** Name for custom collections provided by loaders */
38
  customCollections?: string | string[];
39
  
40
  /** Extension for the resolved id. Set 'jsx' for JSX components (default: '') */
41
  extension?: string;
42
  
43
  /** @deprecated renamed to `prefix` */
44
  componentPrefix?: string;
45
  
46
  /** For collections strict matching. Set true to enable strict matching with '-' suffix */
47
  strict?: boolean;
48
}
49
```
50

51
## Usage Examples
52

53
### Basic Setup with unplugin-vue-components
54

55
```typescript
56
import { defineConfig } from "vite";
57
import Vue from "@vitejs/plugin-vue";
58
import Icons from "unplugin-icons/vite";
59
import IconsResolver from "unplugin-icons/resolver";
60
import Components from "unplugin-vue-components/vite";
61

62
export default defineConfig({
63
  plugins: [
64
    Vue(),
65
    Icons({
66
      compiler: "vue3",
67
    }),
68
    Components({
69
      resolvers: [IconsResolver()],
70
    }),
71
  ],
72
});
73
```
74

75
### Custom Prefix Configuration
76

77
```typescript
78
import IconsResolver from "unplugin-icons/resolver";
79
import Components from "unplugin-vue-components/vite";
80

81
export default {
82
  plugins: [
83
    Components({
84
      resolvers: [
85
        // Default prefix 'i' -> <i-carbon-accessibility />
86
        IconsResolver(),
87
        
88
        // Custom prefix 'icon' -> <icon-carbon-accessibility />
89
        IconsResolver({ prefix: "icon" }),
90
        
91
        // No prefix -> <carbon-accessibility />
92
        IconsResolver({ prefix: false }),
93
      ],
94
    }),
95
  ],
96
};
97
```
98

99
### Collection Filtering
100

101
```typescript
102
import IconsResolver from "unplugin-icons/resolver";
103

104
export default {
105
  plugins: [
106
    Components({
107
      resolvers: [
108
        // Only enable specific collections
109
        IconsResolver({
110
          enabledCollections: ["carbon", "mdi", "heroicons"],
111
        }),
112
        
113
        // Single collection
114
        IconsResolver({
115
          enabledCollections: "carbon",
116
        }),
117
      ],
118
    }),
119
  ],
120
};
121
```
122

123
### Collection Aliases
124

125
```typescript
126
import IconsResolver from "unplugin-icons/resolver";
127

128
export default {
129
  plugins: [
130
    Components({
131
      resolvers: [
132
        IconsResolver({
133
          alias: {
134
            // Use <i-park-abnormal /> instead of <i-icon-park-abnormal />
135
            park: "icon-park",
136
            // Use <i-hi-heart /> instead of <i-heroicons-heart />
137
            hi: "heroicons",
138
            // Use <i-md-star /> instead of <i-mdi-star />
139
            md: "mdi",
140
          },
141
        }),
142
      ],
143
    }),
144
  ],
145
};
146
```
147

148
### Custom Collections Integration
149

150
```typescript
151
import IconsResolver from "unplugin-icons/resolver";
152
import Icons from "unplugin-icons/vite";
153
import { FileSystemIconLoader } from "unplugin-icons/loaders";
154

155
export default {
156
  plugins: [
157
    Icons({
158
      customCollections: {
159
        'brand': FileSystemIconLoader('./src/assets/brand-icons'),
160
        'ui': FileSystemIconLoader('./src/assets/ui-icons'),
161
      },
162
    }),
163
    Components({
164
      resolvers: [
165
        IconsResolver({
166
          customCollections: ["brand", "ui"],
167
        }),
168
      ],
169
    }),
170
  ],
171
};
172
```
173

174
### JSX/React Setup
175

176
```typescript
177
import IconsResolver from "unplugin-icons/resolver";
178
import Icons from "unplugin-icons/vite";
179

180
export default {
181
  plugins: [
182
    Icons({
183
      compiler: "jsx",
184
      jsx: "react",
185
    }),
186
    // For unplugin-auto-import with React
187
    AutoImport({
188
      resolvers: [
189
        IconsResolver({
190
          prefix: "Icon",
191
          extension: "jsx",
192
        }),
193
      ],
194
    }),
195
  ],
196
};
197
```
198

199
### Strict Mode Configuration
200

201
```typescript
202
import IconsResolver from "unplugin-icons/resolver";
203

204
export default {
205
  plugins: [
206
    Components({
207
      resolvers: [
208
        // Strict mode requires exact collection name matching with '-' suffix
209
        IconsResolver({
210
          strict: true,
211
        }),
212
      ],
213
    }),
214
  ],
215
};
216
```
217

218
## Component Naming Patterns
219

220
### Default Pattern (prefix: 'i')
221

222
```vue
223
<!-- Collection: carbon, Icon: accessibility -->
224
<i-carbon-accessibility />
225

226
<!-- Collection: mdi, Icon: heart -->
227
<i-mdi-heart />
228

229
<!-- Collection: heroicons, Icon: star -->
230
<i-heroicons-star />
231
```
232

233
### Colon Syntax
234

235
```vue
236
<!-- Alternative syntax using colon separator -->
237
<i-carbon:accessibility />
238
<i-mdi:heart />
239
<i-heroicons:star />
240
```
241

242
### With Aliases
243

244
```typescript
245
// Configuration
246
IconsResolver({
247
  alias: {
248
    park: "icon-park",
249
    hi: "heroicons",
250
  },
251
})
252
```
253

254
```vue
255
<!-- Using aliases -->
256
<i-park-abnormal />  <!-- Instead of i-icon-park-abnormal -->
257
<i-hi-star />        <!-- Instead of i-heroicons-star -->
258
```
259

260
### Custom Collections
261

262
```typescript
263
// Configuration
264
IconsResolver({
265
  customCollections: ["brand", "ui"],
266
})
267
```
268

269
```vue
270
<!-- Using custom collections -->
271
<i-brand-logo />
272
<i-ui-button />
273
```
274

275
## Advanced Integration Patterns
276

277
### Multiple Resolvers
278

279
```typescript
280
import IconsResolver from "unplugin-icons/resolver";
281
import Components from "unplugin-vue-components/vite";
282

283
export default {
284
  plugins: [
285
    Components({
286
      resolvers: [
287
        // Different configurations for different use cases
288
        IconsResolver({
289
          prefix: "icon",
290
          enabledCollections: ["carbon", "mdi"],
291
        }),
292
        IconsResolver({
293
          prefix: "hero",
294
          enabledCollections: ["heroicons"],
295
          strict: true,
296
        }),
297
      ],
298
    }),
299
  ],
300
};
301
```
302

303
### TypeScript Integration
304

305
```typescript
306
// For better TypeScript support, ensure proper type imports
307
import type { ComponentResolverOption } from "unplugin-icons/resolver";
308

309
const iconResolverConfig: ComponentResolverOption = {
310
  prefix: "i",
311
  enabledCollections: ["carbon", "mdi"],
312
  alias: { c: "carbon", m: "mdi" },
313
};
314

315
export default {
316
  plugins: [
317
    Components({
318
      resolvers: [IconsResolver(iconResolverConfig)],
319
    }),
320
  ],
321
};
322
```