1、安装插件:vite-plugin-svg-icons // 通过命令安装2个插件npm i vite-plugin-svg-icons-D npm i fast-glob-D 如图所示: //package.json"devDependencies":{"@types/node":"^18.7.13","@vitejs/plugin-vue":"^3.0.3","fast-glob":"^3.2.12","sass":"^1.54.5","typescript":"^4.6.4","vit...
在src/main.js 内引入注册脚本 import'virtual:svg-icons-register' 1. 创建SvgIcon组件 /src/components/SvgIcon/index.vue <template><svgaria-hidden="true"class="svg-icon":width="props.size":height="props.size"><use:xlink:href="symbolId":fill="props.color"/></svg></template>import{computed...
Vue3中级指南-如何在vite中使用svg图标 - 掘金 (juejin.cn)[https://juejin.cn/post/7091253193988014110]
// index.vue<template><svg:class="svgClass"aria-hidden="true"><use:xlink:href="iconClassName":fill="color"/></svg> </template>import{computed}from'vue'constprops=defineProps({iconName:{type:String,required:true},className:{type:String,default:''},color:{type:String,default:'#409eff'}}...
使用 vite.config.js中的配置插件 import{ createSvgIconsPlugin }from'vite-plugin-svg-icons'importpathfrom'path'exportdefault() => {return{plugins: [createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(),'src/icons')],// 指定symbolId格式symbolId:'icon-[dir]-...
*/// customDomId: '__svg__icons__dom__',}), ], } } AI代码助手复制代码 在src/main.js 内引入注册脚本 import'virtual:svg-icons-register' AI代码助手复制代码 如何在组件中使用 创建SvgIcon组件 /src/components/SvgIcon/index.vue <template><svgaria-hidden="true"class="svg-icon":width="pro...