一、安装 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...
总结: vite-plugin-svg-icons是基于Vite的插件,通过使用SVG sprite技术,将SVG图标转换为Vue组件并自动导入。它的原理是将多个SVG图标合并到一个SVG sprite文件中,并生成一个包含所有SVG图标信息的JavaScript模块。通过导入这个模块,开发者可以方便地使用SVG图标,并实现按需加载,提高应用的性能和效率。©...
完整内容 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...
以~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'...
组件自动按需导入 安装: npm i unplugin-vue-components -D 配置:vite.config.js import Components from 'unplugin-vue-components/vite' // ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-components/resolvers // 提供了以下集中解析器,使用的时候,需要安装对应的UI库,这里以element为示例 ...
以~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'...