<template>
  <div class="icon-wrapper" :style="wd">
    <svg class="icon" aria-hidden="true" :style="wd">
      <use :xlink:href="iconName"></use>
    </svg>
  </div>
</template>
 
<script>
// 引入从iconfont 下载的symbox文件
// import '@/assets/icons/iconfont-svg.js'

// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
const req = require.context("@/assets/icons/svg", false, /\.svg$/);
// 加载目录下的所有的 svg 文件
requireAll(req);
// console.log('I: 加载svg文件:', req.keys())
export default {
  name: "IconSvg",
  props: {
    name: String,
    prefix: {
      type: String,
      default: "icon-",
    },
    W: {
      type: Number,
      default: 28,
    },
    H: {
      type: Number,
      default: 28,
    },
  },
  mounted() {},
  computed: {
    iconName() {
      let name = `#${this.prefix}${this.name}`;
      return name;
    },
    wd() {
      const style = { width: this.W + "px", height: this.H + "px" };
      return style;
    },
  },
};
</script>
 
<style scoped>
/*.icon-wrapper {
  display: inline-block;
}
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}*/

.icon-wrapper {
  /* Using currentColor above lets
  us use `color` for changing the color
  of our icons: */
  color: red;

  /* The width and height of the SVG
  was previously set to 1em.
  This allows us to use `font-size`
  to change the size of our icon: */
}

.icon {
  display: inline-block;
  color: #444444;
  fill: currentColor;
}
</style>