1.安装vite-plugin-svg-icons npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前...
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:...
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ vue(), // 使用svg-icon createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg/icons')], // 指定symbolId格式 symbolId: 'icon-[name...
简介: Vue3.js中使用svg:vite-plugin-svg-icons 环境 $ node -v v16.14.0 $ pnpm -v 7.4.1 安装依赖 pnpm i -D vite-plugin-svg-icons fast-glob package.json { "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "fast-glob": "^3.2...
简介: Vue3.js中使用svg:vite-plugin-svg-icons 环境 $ node -v v16.14.0 $ pnpm -v 7.4.1 安装依赖 pnpm i -D vite-plugin-svg-icons fast-glob package.json { "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "fast-glob": "^3.2....
"@vitejs/plugin-vue": "^3.0.0", "fast-glob": "^3.2.11", "vite": "^3.0.0", "vite-plugin-svg-icons": "^2.0.1" } } 配置文件 vite.config.js import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'import{createSvgIconsPlugin}from'vite-plugin-svg-icons...