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

<script>
// iconfont下载的svg 要打开文件删除fill="" 删除里面的颜色可以二次定义颜色
// 引入从iconfont 下载的symbox文件
// import '@/assets/icons/iconfont-svg.js'
// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
const req = require.context('@/icons/svg', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)

export default {
  name: 'Icon',
  props: {
    name: String,
    prefix: {
      type: String,
      default: 'icon-'
    },
    color: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '16px'
    },
    //svg高度
    height: {
      type: String,
      default: '16px'
    }
  },
  computed: {
    iconName() {
      return `#${this.prefix}${this.name}`
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-wrapper {
  display: inline-block;
  display: flex;
}
.icon {
  width: 100%;
  height: auto;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin: 0 3px;
}
</style>
