一、安装 vite-plugin-svg-icons npm i vite-plugin-svg-icons -D // 或者 yarn add vite-plugin-svg-icons -D 二、在main.js引入 import 'virtual:svg-icons-register' 三、配置SVG图片文件夹 四、在vite.config.js中配置 //import path,{ resolve } from 'path' import path from 'path' import {c...
4. 在Vue 3项目中按需引入SVG图标 你可以创建一个Vue组件来封装SVG图标的展示逻辑。例如,在src/components目录下创建一个名为SvgIcon.vue的文件: vue <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" :fill="color"/> </svg> <...
按需加载优化一些第三方包的体积 比如loadsh,项目中只用到了{cloneDeep 、throttle、debouce}这个几个函数,但是由于lodash是common.js版本不支持按需引入,500多k全部打包进来了 import _ from 'lodash-es'; // 将会把整个lodash的库引入到项目 import { cloneDeep } from 'lodash-es'; // 将只会把cloneDeep引入...
完整内容 import{defineConfig,loadEnv}from"vite";importpathfrom"path";importvuefrom '@vitejs/plugin-vue';importcreateVitePluginsfrom './vite/plugins';// https://vitejs.dev/config/exportdefaultdefineConfig(({mode,command})=>{constenv=loadEnv(mode,process.cwd());const{VITE_APP_ENV}=env;retu...
总结: vite-plugin-svg-icons是基于Vite的插件,通过使用SVG sprite技术,将SVG图标转换为Vue组件并自动导入。它的原理是将多个SVG图标合并到一个SVG sprite文件中,并生成一个包含所有SVG图标信息的JavaScript模块。通过导入这个模块,开发者可以方便地使用SVG图标,并实现按需加载,提高应用的性能和效率。©...
以~icons/{collection}/{icon}的格式引入需要的图标,collection表示图标集,icon表示图标名。 <template> <icons-home></icons-home> <icons-setting></icons-setting> </template> importIconsHomefrom'~icons/icons/home';importIconsSettingfrom'~icons/icons/setting'; // vite.config.tsimportpathfrom'path...
以~icons/{collection}/{icon}的格式引入需要的图标,collection表示图标集,icon表示图标名。 <template> <icons-home></icons-home> <icons-setting></icons-setting> </template>importIconsHomefrom'~icons/icons/home';importIconsSettingfrom'~icons/icons/setting'; // vite.config.tsimportpathfrom'...