SVG组件封装

SVG组件封装

SvgIcon/index.vue

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
 
<script>
 
export default {
   
  name: 'SvgIcon',
  props: {
   
    // svg图标名称
    name: {
   
      default: ''
    },
    // 自定义样式
    className: {
   
      type: String,
      default: ''
    }
  },
  computed: {
   
    iconName() {
   
      return `#icon-${
     this.name}`;
    },
    svgClass() {
   
      return [
        'svg-icon',
        this.className