【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

使用vite-plugin-svg-icons插件显示本地svg图标

1.安装vite-plugin-svg-icons插件

npm i [email protected] -D
npm i [email protected] -D

2.使用vite-plugin-svg-icons插件

2.1 在项目根目录查找vite.config.js,进行配置

import{ createSvgIconsPlugin }from'vite-plugin-svg-icons';const path =require('path');functionresolve(dir){return path.join(__dirname, dir);}exportdefault{plugins:[vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs:[path.resolve(process.cwd(),'public/img/svg')],// 指定symbolId格式symbolId:'icon-[name]',}),],}

2.2 vite-plugin-svg-icons插件引入在main.js中

import'virtual:svg-icons-register'

2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致

项目中使用示例:
//menu.icon是路径里面的svg图片名称

<svg aria-hidden="true" style="width: 14px; height: 14px"><use :href="`#icon-${menu.icon}`"/></svg>