vue 下引入图标库

1.引入阿里巴巴图标库  

方式1》unicode 引用   就不多说了，直接照着官方来，如果下载到本地直接映入css文件即可

方式2》fontclass  http://at.alicdn.com/t/font_2540717_oiwle39qk8q.css  

            <i class="iconfont icon-xxx"></i>

---

2.引入font-awesome    官网案例 – Font Awesome 中文网

npm i font-awesome    

<i class="fa fa-camera-retro"></i>

---

3.element-plus   引入后再调用，组件图标要显示都是要绑定一个变量才能显示，比如面包屑

npm install @element-plus/icons-vue

<el-icon :size="20">
    <Edit />
  </el-icon>

全部引入动态获取图标   main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

<el-sub-menu index="2">
          <template #title>
            <el-icon :size="18"><component class="icons" :is="proIcon"></component></el-icon>
            <span>审批管理</span>
          </template>
          <el-menu-item index="2-1">带我审批</el-menu-item>
          <el-menu-item index="2-2">休假管理</el-menu-item>
        </el-sub-menu>

 :is  绑定icon图标名称   Setting  Fold  等，如果单独用可以el-icon包裹起来就可以

---

4. npm install --save @ant-design/icons-vue

用法同3差不多

---

建议用阿里或者font-awesome