<template>
  <svg class="svg-icon" aria-hidden="true" :style="{ color: color, width: width, height: height }">
    <use :xlink:href="svgName" />
  </svg>
</template>

<script>
  import { defineComponent, computed } from 'vue';

  /**
   * 生效条件：
   * 1. svg图片要放在src/assets/svg
   * 2. iconName: svg名称，比如overview.svg，那么iconName就是overview
   * 3. UI给到的svg一般是自带颜色的。如果想要svg的颜色跟随父组件的color动态改变,
   * 或者父组件通过css修改svg颜色，必须把svg中的fill颜色值设置为currentColor，也就是fill="currentColor"，否则外界无法修改它的颜色
   * 4. 传入width和heightprops可动态修改svg的大小
   */

  export default defineComponent({
    name: 'SvgIcon',
    props: {
      iconName: {
        type: String,
        required: true,
      },
      color: {
        type: String,
        required: false,
      },
      width: {
        type: String,
        required: false,
        default: '1em',
      },
      height: {
        type: String,
        required: false,
        default: '1em',
      },
    },
    setup(props) {
      const svgName = computed(() => `#icon-${props.iconName}`);
      return {
        svgName,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .svg-icon {
    position: relative;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: -0.15em;
    fill: currentColor;
    outline-width: 0;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
      cursor: pointer;
      content: '';
    }
  }
</style>
