vite-plugin-svg-icons 的使用

安装

pnpm i vite-plugin-svg-icons -D

main.ts

import 'virtual:svg-icons-register'

vite.config.ts

plugins: [ createSvgIconsPlugin({ iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')], symbolId: 'icon-[dir]-[name]' }) ],

页面使用 href 要以#icon开头

<svg :style="{width,height}"> <use :xlink:href="#icon-${iconName}" :fill="iconColor" /> </svg>

自定义插件去完成注册全局组件

main.ts

src/components/index.ts