最近开发中使用到一个好玩的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 &#