自定义组件svg的用法

自定义组件svg的用法

我的使用场景：因为有好几个都用到svg图，而且大小布局都一样，所以就有了这个自定义组件。
效果图：

第一步 ： 在components中创建一个svgIcon.vue文件

aria-hidden属性的作用： 把 aria-hidden=“true” 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：
1、纯装饰性的内容，如图标、图片
2、重复的内容，如重复的文本
3、屏幕外或被折叠的内容，如菜单

<template>
  <svg :class="['svg-icon', svgClass]" aria-hidden="true" v-  on="$listeners">
    <use :xlink:href="`#icon-${name}`" />
  svg>
template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    svgClass: {
      type: String,
      default: ''
    }
  }
}
</script>