<svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName() { return `...
1.文件下新建SvgIcon文件夹以及子文件index.js,index.vue,svg文件夹(用于存放svg图片) 2.编写index.vue组件 <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"/> </svg> </template> export default { name: 'SvgIcon', props: { iconClass: { type: String, ...
<template><svgclass="svg-icon"aria-hidden="true"><use:xlink:href="`#icon-${name}`"/></svg></template>exportdefault{name:'SvgIcon',props:{name:{// svg文件名称type:String,required:true}}}.svg-icon{width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden;}复制代码...
vue项目中时常需要引用icon图标,特地写一个组件用于引用svg icon。 1.将你想要的svg加入购物车,点击下载代码 打开下载的文件夹,将其中的js文件复制进你的项目 在index.html中引入该js文件 2.创建icon.vue组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> ...
//图标前缀,默认icon prefix:{ type:String, default:'icon' }, //图标名称 name:{ type:String, default:"" } }); // 注意: symbolId 的值需要与 vite.config.ts中配置的 symbolId 保持一致。 最终symbolId的值格式为#icon-svgName。 const symbolId = computed(()=>`#${props.prefix}-${props....
Vue.component('svgIcon',svgIcon) 1. 2. 3. 下载svg图标 在src文件下新建文件夹svg,所有下载的SVG图标放入其中。 批量下载图标的方法,可参考链接 4. 使用svg图标 以del.svg图标为例,修改scale的值调整图标的大小。 <svgIconname="del":scale="1"/> ...
{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(App)app.component("SvgIcon",SvgIcon)// 【svg-icons相关】app.use(router)app.use(ElementPlus)app.use(createPinia())// 全局注册使用 element plus 的图标for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app....
例如,将所有绘制 svg的代码放到 svg-icon.vue文件中,所有图标的绘制代码使用 symbol标签分隔开并单独命名,避免错乱,然后将这个文件当做是一个组件导出,在主页面中引入此组件,接着,在需要 使用 svg图标的地方,通过 use标签将其引入。 svg-draw.vue代码示例如下: ...
使用SVG图标库(如vue-svgicon或@fortawesome/vue-fontawesome)是一种高效的方法,可以方便地管理和使用SVG图标。以下是使用vue-svgicon的具体步骤: 安装vue-svgicon: npm install vue-svgicon --save 初始化vue-svgicon: // main.js import Vue from 'vue'; ...
创建一个新的Vue组件文件(例如SvgIcon.vue)。 在组件文件中引入SVG代码。 在其他Vue组件中引用该组件。 示例: SvgIcon.vue <template> <svg :width="width" :height="height" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> ...