# vite-plugin-svg-icons
**English** | [中文](./README.zh_CN.md)
Used to generate svg sprite map.
## Feature
- **Preloading** All icons are generated when the project is running, and you only need to operate dom once.
- **High performance** Built-in cache, it will be regenerated only when the file is modified.
## Installation (yarn or npm)
**node version:** >=12.0.0
**vite version:** >=2.0.0
```
yarn add vite-plugin-svg-icons -D
```
or
```
npm i vite-plugin-svg-icons -D
```
## Usage
- Configuration plugin in vite.config.ts
```ts
import viteSvgIcons from 'vite-plugin-svg-icons';
import path from 'path';
export default () => {
return {
plugins: [
viteSvgIcons({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]',
}),
],
};
};
```
- Introduce the registration script in src/main.ts
```ts
import 'vite-plugin-svg-icons/register';
```
Here the svg sprite map has been generated
## How to use in components
**Vue way**
`/src/components/SvgIcon.vue`
```vue
```
**icons Directory Structure**
```bash
# src/icons
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg
```
`/src/App.vue`
```vue