vue中使用iconfont图标字体svg

封装iconfont组件

<template>
  <svg
    class="icon"
    aria-hidden="true"
    :style="{
      width: `${width}px`,
      height: `${height}px`,
    }"
  >
    <use :xlink:href="'#' + iconClass" v-bind="attrs"></use>
  </svg>
</template>

<script lang="ts" setup>
const props = defineProps({
  iconClass: {
    required: true,
    type: String,
  },
  width: {
    type: [String, Number],
    required: true,
  },
  height: {
    type: [String, Number],
    required: true,
  },
});
const { iconClass, width, height } = toRefs(props);
const attrs = useAttrs();
</script>

<style lang="scss" scoped></style>