arco.design动态引入icon

如果我们想在项目中动态引入icon，类似与这样：

在官网中，有这么一句话：Arco图标是一个独立的库，需要额外引入并注册使用。

这意味着，arco中的所有icon默认不是全量引入的，你只能手动引入单个icon并使用

<template>
  /* 其它页面结构... */
  <icon-down/>
</template>

你想要在递归组件中动态引入组件，则需要在main.ts中配置额外引入图标库

import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
// 额外引入图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';

const app = createApp(App);
app.use(ArcoVue);
app.use(ArcoVueIcon);
app.mount('#app');

然后在需要动态引入的地方通过component组件使用使用

<template>
  <div>
    <component v-if="props.icon" :is="props.icon"></component>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  icon: {
    type: String,
    default: ""
  }
});
</script>
<style lang="scss" scoped></style>