vue3.0引入矢量图标，封装组件

一、在阿里粑粑矢量图标库选择图标并下载压缩包，解压后放在项目中

二、引入css文件
在项目的总文件（App.vue）或者是入口文件里引入（因为全局都要用到）
1、App.vue

@import url("./assets/iconFont/iconfont.css");

2、main.js

import "./assets/iconFont/iconfont.css";

三、封装组件
组件代码

<template>
  <div
    :class="['iconfont', id]"
    :style="{ fontSize: `${fontSize}px`, color: `${color}` }"
  ></div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    fontSize: {
      type: [Number, String], // 字体大小类型有string和number两种
      default: 40
    }
  }
};
</script>
<style></style>

四、页面使用

<icon-font id="icon-nv" color="red" size="50" />