全局使用antdv图标组件
# 在全局使用 antdv 的图标组件
我们需要进行全局可以随时使用图标组件，而不是每次需要的时候，
import一次，这样对于初次开发的比较麻烦。
先下载依赖包：
npm install --save @ant-design/icons-vue
1
因为图标库没啥特别大的改动，我们无需去选择一些比较适合Vue3的版本。
在main.js/ts中引入
js版本
// 导入所有的图标库
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
app.use(store)
.use(router)
.use(Antd)
// 全局使用图标
const icons: any = Icons
for (const i in icons) {
app.component(i, icons[i])
}
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ts版本
// 导入所有的图标库
import * as Icons from '@ant-design/icons-vue'
const app = createApp(App)
app.use(store)
.use(router)
.use(Antd)
// 全局使用图标
const icons: any = Icons
for (const i in icons) {
app.component(i, icons[i])
}
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2021/12/14, 22:48:09