<svg class="svg-icon"> <use :xlink:href="iconName" /> </svg> </template> //import x from '' export default { name: "SvgIcon", props: { iconClass: { type: String, required: true }, }, computed: { iconName() { return `#icon-${this.iconClass}`; }, } }; .svg-ico...
2.插入svg-sprite-loader包 npm i svg-sprite-loader 3.在src文件夹下创建icon文件夹 结构如下: 4.icon中index.js 1 2 3 4 5 6 7 8 9 importVue from'vue' importSvgIcon from'@/components/SvgIcon'// svg组件 // register globally Vue.component('svg-icon', SvgIcon) const requireAll = requir...
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName" /> </svg> </template> // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage import { isExternal } from '@/utils/validate' export default...
3,在src/components目录下添加SvgIcon文件夹,接着在文件夹内创建index.vue,内容如下 <template><svgv-else:class="svgClass"aria-hidden="true"v-on="$listeners"><use:xlink:href="iconName"/></svg></template>// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon...
创建一个SPIcon组件,封装svg。避免重复编码 <template><svgaria-hidden="true"class="svg-icon":style="{height:size,width:size}"><use:xlink:href="symbolId":fill="color"></use></svg></template>import{computed}from'vue'constprops=defineProps({//图标大小size:{type:[Number,String],default:'16...
symbolId: 'icon-[dir]-[name]' }) ], 1. 2. 3. 4. 5. 6. 7. 8. 9. 在入口文件进行配置: import 'virtual:svg-icons-register' 1. 使用方法 在assets/icons/ 下引入 svg 格式的文件,并给图标命名。 只需在需要的地方,使用 svg 引入图标即可。需要注意的点是:xlink:href用哪个图标,其属性值...
vue create svg-icon-app 采用默认的模板来构建了一个svg-icon-app项目。我们先跟着官网提供的思路来一步一步往下走,在components目录下创建一个新的目录icons。并将相应的SVG图标以一种标准化的方式命名,比如: components/icons/IconBox.vue components/icons/Facebook.vue ...
<svg><use:xlink:href="#icon1"></use></svg> 但是这里有两个问题: 从图标库(比如阿里的 iconfont)下载下来的通常是.svg文件,如何根据多个单独的.svg文件生成 svg 雪碧图? 每次要使用图标都得写这么一段代码,并不是很方便,是否可以像使用组件那样使用图标?
<template><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: '', }, }, ...
例如,将所有绘制 svg的代码放到 svg-icon.vue文件中,所有图标的绘制代码使用 symbol标签分隔开并单独命名,避免错乱,然后将这个文件当做是一个组件导出,在主页面中引入此组件,接着,在需要 使用 svg图标的地方,通过 use标签将其引入。 svg-draw.vue代码示例如下: ...