vue组件:阿里云svg彩色图标封装

1、采用阿里云symbol 引用
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

2、在app.css中定义图标大小
<style type=”text/css”>
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

3、阿里云要求图标格式如下

<svg class=”icon” aria-hidden=”true”>
<use xlink:href=”#icon-xxx”></use>
</svg>

4、【封装vue组件】
定义Svg.vue
“`
<template>
<div class=”inline-block”>
<svg aria-hidden=”true” class=”icon”>
<use :id=”name” v-bind:xlink:href=”name”></use>
</svg>
</div>
</template>

<script>
export default {
props: [‘name’],
}
</script>

<style scoped>

</style>

“`
5、使用要求:需要后台传递一个对象,格式如下:
前台使用:`<hd-svg :name=”menu.icon”></hd-svg>`
“`
icon: ‘#icon-tixian’,
“`
这时可以使用vue组件批量获取后台图标的值,动态渲染
[补充知识]
如<svg class=”icon” aria-hidden=”true”><use xlink:href=”#xueshengxinxi”></use></svg>
可以通过 href.baseVal 获取或者修改xlink:href的值

© 版权声明
THE END
喜欢就支持一下吧
点赞9
分享
评论 抢沙发
袁浩的头像孙先森资源|专注优质网络资源教程分享孙先森资源教程

昵称

取消
昵称表情代码图片