问题与思路

在使用前端组件库时，我们常常会遇到需要动态加载 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 => {ponent(key, Icons[key as keyof typeof Icons])})app.mount('#app')

2. 使用动态组件 component

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