最近开发中使用到一个好玩的Vite三方小插件vite-plugin-svg-icons很实用，可以辅助我们开发过程中快速加载svg小图标。其原理是在Vite编译器的时候通过一次性的DOM操作将SVG插入DOM结构中，然后通过使用内联SVG进行加载访问，极大的方便了我们的小图标引用模式。 若只是少量的svg图片加载建议食用，若是svg图片数量过多并不建议采用（过多的svg文件插入也会导致我们的html文件过大）。

安装

通过上述了解后，接下我们来配置使用vite-plugin-svg-icons插件，该插件需要Vite支持。

$ npm i  vite-plugin-svg-icons -D // 或
$ yarn add vite-plugin-svg-icons -D // 或
$ pnpm i vite-plugin-svg-icons -D

由于其主要是在编译打包期生效，所以放在devDependencies中即可。

配置

安装完成后，需要在vite.config.ts中引入该插件，并配置对应svg地址：

// vite.config.ts
import * as path from 'node:path'
import type { ConfigEnv, UserConfig } from 'vite'
import { createSvgIconsPlugin } from &#