}// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ // 新建 assets/svg文件夹,将svg放入文件夹下 iconDirs: [resolve('src/assets/svg')],//定义每个 SVG 图标的符号 ID symbolId:"icon-[name]"}), ], }) 定义一个svgicon组件,新建SvgIcon....
1.安装依赖:npm install vite-plugin-svg-icons -D 2.vite.config.ts 中配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'//在export default ({ command, mode }: ConfigEnv): UserConfig中的plugins数组中添加代码plugins: [ createSvgIconsPlugin({//指定需要缓存的图标文件夹,地址可...
<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconName":fill="color"/></svg></template>import{computed,onMounted,reactive,ref,watchEffect,watch,getCurrentInstance,defineComponent}from'vue'import{useRoute,useRouter}from 'vue-router' exportdefaultdefineComponent({props:{iconClass:...
在这个例子中,account是你放在src/assets/svg目录下的SVG图标的文件名。你可以通过icon-name属性来指定要使用的图标,并通过color和class-name属性来自定义图标的颜色和类名。 通过以上步骤,你就可以在Vue 3项目中使用vite-plugin-svg-icons插件来方便地管理和使用SVG图标了。
exportdefaultdefineConfig({//静态资源服务的文件夹publicDir:'public',base:'./',plugins:[vue(),createSvgIconsPlugin({//svg配置// iconDirs: [path.resolve(process.cwd(),'src/assets/icons/svg')],//导入路径为'src/assets/icons'iconDirs:[fileURLToPath(newURL('src/assets/icons/svg',import.met...
"@vitejs/plugin-vue":"^3.0.0", "fast-glob":"^3.2.11", "vite":"^3.0.0", "vite-plugin-svg-icons":"^2.0.1" } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 配置文件 vite.config.js import { defineConfig } from 'vite' ...
首先安装vite-plugin-svg-icons为开发依赖: yarn add vite-plugin-svg-icons -D 3.2 配置 vite 在vite.config.ts中配置该插件: ... import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' ... export default defineConfig({ ... plugins: [ ...
"unplugin-vue-components": "^0.25.1", "vite": "^4.4.0", "vite-plugin-eslint": "^1.8.1", "vite-plugin-svg-icons": "^2.0.1", "vue-tsc": "^1.8.3" }, "browserslist": [ 1,070 changes: 1,029 additions & 41 deletions 1,070 pnpm-lock.yaml Load diff Large diffs are not...
unplugin-vue-components 组件自动按需导入 安装: npm i unplugin-vue-components -D 配置:vite.config.js import Components from 'unplugin-vue-components/vite' // ui库解析器,也可以自定义,需要安装相关UI库,unplugin-vue-components/resolvers // 提供了以下集中解析器,使用的时候,需要安装对应的UI库,这里...
本地运行并打包成功,在服务器上报错,打开package.json查看依赖的版本号: vite-plugin-svg-icons版本号被修改了,此版本过低导致报错。 原因是服务器上的npm没有装淘宝镜像。 解决: 安装淘宝npm(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org 再重新安装依赖,成功啦~...