Ant Design Vue官网中,给出的示例中,引用图标组件,需要在每个页面进行按需引入。个人觉得,较为麻烦,下面给大家提供一个全局注册ant图标组件的一种方法。

1.安装 @ant-design/icons-vue 图标组件包

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

2.在main.js / main.ts进行注册引入

import * as Icons from '@ant-design/icons-vue'
import router from './router'
import store from './store'

const app = createApp(App)

app.use(store).use(router).use(Antd)
app.mount('#app')

// 全局使用图标,遍历引入
const icons: any = Icons
for (const i in icons) {
  app.component(i, icons[i])
}

3.页面使用

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐