import'@/SvgIcon/index.js'importSvgIconfrom'@/SvgIcon/index.vue'// svg组件letapp=createApp(App)app.component('svgIcon',SvgIcon);app.use(App).use(store).use(router).mount('#app') 安装svg-sprite-loader npm install svg-sprite-loader --save-dev 配置vue.congfig.js //引入constpath=require...
在Vue 3项目中使用SVG图标(svg-icon),你可以按照以下步骤进行操作: 1. 安装并引入svg-icon相关的Vue 3插件或组件 首先,你需要安装一个能够将SVG图标转换为Vue组件的插件,比如vite-plugin-svg-icons。如果你使用的是Vite构建工具,可以通过以下命令安装: bash pnpm install vite-plugin-svg-icons -D 或者如果你...
在src/components文件夹下新建SvgIcon文件夹,然后在SvgIcon文件夹下index.ts文件,内容如下: <!--src/components/SvgIcon/index.vue--> <template> <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size" > <use :xlink:href="symbolId" :fill="color"/> </s...
scriptsetup/* * 使用方法:<svg-iconsvg-name="icon-name"width="40px"height="40px"color="#f00"></svg-icon>*/ const props = defineProps({ svgName: { type: String, default: '' }, width: { type: String, default: '20px' }, height: { type: String, default: '20px' }, color:...
4、打开 main.ts 文件,添加注释为【svg-icons相关】的代码 代码解读 import{createApp}from'vue'importrouterfrom'./router/index'importElementPlusfrom'element-plus'import'element-plus/dist/index.css'import'virtual:svg-icons-register'// 【svg-icons相关】importSvgIconfrom"./components/SvgIcon/index.vue"...
{computed}from'vue';constprops=defineProps({iconName:{type:String,required:true},color:{type:String,default:''},size:{type:[Number,String],default:18}})constsymbolId=computed(()=>`#icon-${props.iconName}`);.svg-icon{fill:currentColor;vertical-align:middle;} 5、页面中使用该组件: /...
symbolId: 'icon-[dir]-[name]', }), ], } } (三)封装组件 创建SvgIcon组件,封装svg。( /src/components/SvgIcon/index.vue) <template> <svg aria-hidden="true" class="svg-icon" :style="{height:size,width:size}"> <use :xlink:href="symbolId" :fill="color"></use> ...
<template> <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size"> <use :xlink:href="symbolId" :fill="props.color" /> </svg> </template> import { computed } from 'vue' const props = defineProps({ prefix: { type: String, default: 'icon' }, name...
//svg插件需要配置代码import 'virtual:svg-icons-register'; 4.在src/assets中新建目录svgs, 将所有的的svg图片放在svgs文件中 5.封装svg-icon.vue组件 <template><svg:class="className":style="{ width, height: _height }"><use:xlink:href="iconName"></use></svg></template>import { computed }...
将其放到srcassetssvg目录下 进行解压,删除不必要的东西,只留下iconfont.js文件即可 之后在main.ts中进行全局导入 import './assets/svg/iconfont.js' 项目中引入 svg-icon 在src目录下,创建一个用于存放插件的目录plugin // index.vue<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:...