问题与思路

在使用前端组件库时，我们常常会遇到需要动态加载 Icon 图标，如何处理这一需求，是前端开发人员必须思考的问题。在 vue 中，有一个内置组件 component，它的主要作用是配合 is 动态渲染组件，这一作用就满足了我们上述的需求。

全局注册使用

1. 在 main.ts 中全局引入组件库图标并注册动态组件 component

import { createApp } from 'vue'
import App from './App.vue'
// 引入
import * as Icons from '@ant-design/icons-vue'

const app = createApp(App)

// 注册
Object.keys(Icons).map(key => {
    app.component(key, Icons[key as keyof typeof Icons])
})

app.mount('#app')

2. 使用动态组件 component

<template>
    ...
        <component is="radar-chart-outlined"></component>
    ...
</template>