IconFont.vue

<template>
  <svg
    class="icon-font"
    aria-hidden="true"
    :style="{
      fontSize: size ? `${size}` : `inherit`,
      verticalAlign: align ? `-.${align}em` : `0em`,
      color: color ? color : `inherit`,
    }"
  >
    <use
      :xlink:href="`#${icon}${
        iconTheme == 'default-iconTheme' ? '' : '-color'
      }`"
    ></use>
  </svg>
</template>
<script>
// 组件参数
// 例：<IconFont icon="bg" size="18px" align="14"/>
// icon 图标key **必填
// size 图标大小 非必填 默认为父元素字体大小
// align 图标对齐的值 非必填 默认为15
// color 图标颜色 非必填 默认为父元素字体颜色
export default {
  props: ["icon", "size", "align", "color", "scale"],
  computed: {
    iconTheme() {
      return this.$store.state.user.iconTheme;
    },
  },
};
</script>