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