alicon在Vue中的组件化使用

1. 图标来源iconfont-阿里巴巴矢量图标库，进入aliicon，点击资源管理—我的项目—新建项目；
2. 查找所需的icon，加入购物车，添加至项目，选择symobl下载至本地；

点击收藏icon

添加至项目

选择symbol下载至本地

3. 解压下载的文件夹，复制到项目文件下

4.在项目目录下创建icon-svg.vue组件，定义iconClass动态引入iconName，

<!--iconfont封装-->
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: "icon-svg",
  props:{
    iconClass:{
      type: String,
      required: true
    }
  },
  computed:{
    iconName(){
      return `#icon-${this.iconClass}`
    }
  }
}
</script>
<style scoped>
</style>

5.在main.js入口文件中全局引用icon-svg

import "@/assets/icon-svg/iconfont";
const app = createApp(App);
app.component('icon-svg', IconSvg)

6.在html中使用icon <icon-svg class="icon-svg" icon-class="xitongzhuangtai"></icon-svg>