【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标
使用vite-plugin-svg-icons插件显示本地svg图标
1.安装vite-plugin-svg-icons插件
npm i fast-glob@3.x -D npm i vite-plugin-svg-icons@2.x -D
2.使用vite-plugin-svg-icons插件
2.1 在项目根目录查找vite.config.js,进行配置
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; const path = require('path'); function resolve(dir) { return path.join(__dirname, dir); } export default { 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图片名称
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...