Vue项目中使用Element-plus的Icon图标,包括按钮和动态菜单
1、安装图标库
npm install @element-plus/icons
2、注册
main.ts文件中引入并注册
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import * as ElIcons from '@element-plus/icons'
const app = createApp(App)
for (const name in ElIcons){
app.component(name,(ElIcons as any)[name])
}
app.use(ElementPlus).mount('#app')
3、在组件中直接使用
// 结合按钮使用
<el-button type="primary" icon="Edit" >编辑</el-button>
<el-button
size="mini"
type="primary"
class="inline-block"
icon="More"
title="详情"
@click="handleDetail(row.id)"
/>
// 结合el-icon使用
<el-icon>
<delete />
</el-icon>
4、在el-menu
组件中动态使用
如果想在渲染菜单