0
# Build Tool Integrations
1

2
Framework-specific plugin instances for different build tools and environments, enabling unplugin-icons to work universally across the JavaScript ecosystem.
3

4
## Capabilities
5

6
### Vite Plugin
7

8
Plugin integration for Vite build tool.
9

10
```typescript { .api }
11
/**
12
 * Vite plugin for unplugin-icons
13
 * @param options - Configuration options
14
 * @returns Vite plugin instance
15
 */
16
declare const VitePlugin: (options?: Options) => any;
17
```
18

19
**Usage:**
20

21
```typescript
22
import { defineConfig } from "vite";
23
import Icons from "unplugin-icons/vite";
24

25
export default defineConfig({
26
  plugins: [
27
    Icons({
28
      compiler: "vue3",
29
      autoInstall: true,
30
    }),
31
  ],
32
});
33
```
34

35
### Webpack Plugin
36

37
Plugin integration for Webpack build tool.
38

39
```typescript { .api }
40
/**
41
 * Webpack plugin for unplugin-icons
42
 * @param options - Configuration options  
43
 * @returns Webpack plugin instance
44
 */
45
declare const WebpackPlugin: (options?: Options) => any;
46
```
47

48
**Usage:**
49

50
```javascript
51
const Icons = require("unplugin-icons/webpack");
52

53
module.exports = {
54
  plugins: [
55
    Icons({
56
      compiler: "react",
57
      jsx: "react",
58
    }),
59
  ],
60
};
61
```
62

63
### Rollup Plugin
64

65
Plugin integration for Rollup build tool.
66

67
```typescript { .api }
68
/**
69
 * Rollup plugin for unplugin-icons
70
 * @param options - Configuration options
71
 * @returns Rollup plugin instance
72
 */
73
declare const RollupPlugin: (options?: Options) => any;
74
```
75

76
**Usage:**
77

78
```javascript
79
import Icons from "unplugin-icons/rollup";
80

81
export default {
82
  plugins: [
83
    Icons({
84
      compiler: "svelte",
85
      scale: 1.2,
86
    }),
87
  ],
88
};
89
```
90

91
### esbuild Plugin
92

93
Plugin integration for esbuild build tool.
94

95
```typescript { .api }
96
/**
97
 * esbuild plugin for unplugin-icons
98
 * @param options - Configuration options
99
 * @returns esbuild plugin instance
100
 */
101
declare const EsbuildPlugin: (options?: Options) => any;
102
```
103

104
**Usage:**
105

106
```javascript
107
import { build } from "esbuild";
108
import Icons from "unplugin-icons/esbuild";
109

110
build({
111
  plugins: [
112
    Icons({
113
      compiler: "jsx",
114
      jsx: "react",
115
    }),
116
  ],
117
});
118
```
119

120
### Rspack Plugin
121

122
Plugin integration for Rspack build tool.
123

124
```typescript { .api }
125
/**
126
 * Rspack plugin for unplugin-icons
127
 * @param options - Configuration options
128
 * @returns Rspack plugin instance
129
 */
130
declare const RspackPlugin: (options?: Options) => any;
131
```
132

133
**Usage:**
134

135
```javascript
136
const Icons = require("unplugin-icons/rspack");
137

138
module.exports = {
139
  plugins: [
140
    Icons({
141
      compiler: "vue3",
142
      defaultClass: "icon",
143
    }),
144
  ],
145
};
146
```
147

148
### Nuxt Module
149

150
Special integration for Nuxt framework with automatic configuration.
151

152
```typescript { .api }
153
/**
154
 * Nuxt module for unplugin-icons with automatic setup
155
 * @param options - Configuration options
156
 * @param nuxt - Nuxt instance (optional)
157
 */
158
declare const NuxtModule: (options?: Options, nuxt?: any) => void;
159
```
160

161
**Usage:**
162

163
```typescript
164
// nuxt.config.ts
165
export default defineNuxtConfig({
166
  modules: [
167
    ["unplugin-icons/nuxt", {
168
      autoInstall: true,
169
    }],
170
  ],
171
});
172
```
173

174
## Framework-Specific Examples
175

176
### React + Vite
177

178
```typescript
179
import { defineConfig } from "vite";
180
import react from "@vitejs/plugin-react";
181
import Icons from "unplugin-icons/vite";
182

183
export default defineConfig({
184
  plugins: [
185
    react(),
186
    Icons({
187
      compiler: "jsx",
188
      jsx: "react",
189
      defaultClass: "react-icon",
190
    }),
191
  ],
192
});
193
```
194

195
### Vue 3 + Vite
196

197
```typescript
198
import { defineConfig } from "vite";
199
import vue from "@vitejs/plugin-vue";
200
import Icons from "unplugin-icons/vite";
201

202
export default defineConfig({
203
  plugins: [
204
    vue(),
205
    Icons({
206
      compiler: "vue3",
207
      autoInstall: true,
208
      scale: 1.2,
209
    }),
210
  ],
211
});
212
```
213

214
### Svelte + Vite
215

216
```typescript
217
import { defineConfig } from "vite";
218
import { svelte } from "@sveltejs/vite-plugin-svelte";
219
import Icons from "unplugin-icons/vite";
220

221
export default defineConfig({
222
  plugins: [
223
    svelte(),
224
    Icons({
225
      compiler: "svelte",
226
      defaultStyle: "color: currentColor;",
227
    }),
228
  ],
229
});
230
```
231

232
### React + Webpack
233

234
```javascript
235
const path = require("path");
236
const Icons = require("unplugin-icons/webpack");
237

238
module.exports = {
239
  entry: "./src/index.js",
240
  plugins: [
241
    Icons({
242
      compiler: "jsx",
243
      jsx: "react",
244
      customCollections: {
245
        'local': require("unplugin-icons/loaders").FileSystemIconLoader(
246
          path.resolve(__dirname, "src/assets/icons")
247
        ),
248
      },
249
    }),
250
  ],
251
};
252
```
253

254
### Vue 2 + Webpack
255

256
```javascript
257
const { VueLoaderPlugin } = require("vue-loader");
258
const Icons = require("unplugin-icons/webpack");
259

260
module.exports = {
261
  plugins: [
262
    new VueLoaderPlugin(),
263
    Icons({
264
      compiler: "vue2",
265
      autoInstall: true,
266
    }),
267
  ],
268
};
269
```
270

271
### Solid + Rollup
272

273
```javascript
274
import solid from "vite-plugin-solid";
275
import Icons from "unplugin-icons/rollup";
276

277
export default {
278
  plugins: [
279
    solid(),
280
    Icons({
281
      compiler: "solid",
282
      scale: 1.1,
283
    }),
284
  ],
285
};
286
```
287

288
### Nuxt 3 Integration
289

290
```typescript
291
// nuxt.config.ts
292
export default defineNuxtConfig({
293
  modules: [
294
    ["unplugin-icons/nuxt", {
295
      compiler: "vue3", // Auto-detected for Nuxt 3
296
      autoInstall: true,
297
      customCollections: {
298
        'brand': require("unplugin-icons/loaders").FileSystemIconLoader(
299
          "./assets/brand-icons"
300
        ),
301
      },
302
    }],
303
  ],
304
});
305
```
306

307
### Universal Configuration
308

309
```typescript
310
// config.js - Works with any build tool
311
const Icons = (buildTool) => require(`unplugin-icons/${buildTool}`);
312

313
const iconConfig = {
314
  compiler: "vue3",
315
  autoInstall: true,
316
  defaultClass: "icon",
317
  customCollections: {
318
    'ui': require("unplugin-icons/loaders").FileSystemIconLoader("./src/icons"),
319
  },
320
};
321

322
// Usage examples:
323
// Vite: Icons('vite')(iconConfig)
324
// Webpack: Icons('webpack')(iconConfig)  
325
// Rollup: Icons('rollup')(iconConfig)
326
```
327

328
## Build Tool Specific Features
329

330
### Vite-Specific Features
331

332
```typescript
333
import Icons from "unplugin-icons/vite";
334

335
export default {
336
  plugins: [
337
    Icons({
338
      // Vite supports HMR for icon changes
339
      compiler: "vue3",
340
      // Works with Vite's dev server
341
      autoInstall: true,
342
    }),
343
  ],
344
};
345
```
346

347
### Webpack-Specific Features
348

349
```javascript
350
const Icons = require("unplugin-icons/webpack");
351

352
module.exports = {
353
  plugins: [
354
    Icons({
355
      // Webpack integration supports all loaders
356
      compiler: "react",
357
      // Works with webpack-dev-server
358
      customCollections: {
359
        'assets': require("unplugin-icons/loaders").FileSystemIconLoader("./assets"),
360
      },
361
    }),
362
  ],
363
};
364
```
365

366
### Nuxt-Specific Features
367

368
The Nuxt module provides additional automatic configuration:
369

370
- Automatically detects Nuxt version and sets appropriate Vue compiler
371
- Injects TypeScript definitions for Vue icon components
372
- Configures both Webpack and Vite plugins automatically
373
- Integrates with Nuxt's module system
374

375
```typescript
376
// Automatically configured by Nuxt module:
377
// - compiler: 'vue3' for Nuxt 3+
378
// - TypeScript types: 'unplugin-icons/types/vue'
379
// - Both webpack and vite plugin setup
380
```