IconFont vue3

IconFont.vue

<template>
  <svg class="icon" aria-hidden="true" :width="fontSize" :height="fontSize">
    <use :xlink:href="class" :fill="color"></use>
  </svg>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  created() {
    let iconfont = document.getElementById("iconfont");
    if (!iconfont) {
      const s = document.createElement("script");
      s.id = "iconfont";
      s.type = "text/JavaScript";
      s.src = this.scriptUrl;
      document.body.appendChild(s);
    }
  },
  props: {
    scriptUrl: {
      //iconfont上的symbol地址
      type: String,
      default: "http://at.alicdn.com/t/xxxxxxx.js",
    },
    class: String, //需要添加的字体图标类
    color: {
      //图标颜色
      type: String,
      default: "#444",
    },
    fontSize: {
      //图标大小
      type: [String, Number],
      default: 16,
    },
  },
});
</script>

<style scoped>
.icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

usage.vue

<template>
 <Iconfont class="#iconpassword" fontSize="20" color="#ccc" />
</template>

<script>
import Iconfont from "@/components/IconFont.vue";

export default {
  data() {
    return {
    };
  },
  components: {
    Iconfont,
  },
}