vue3项目中使用antd图标

在项目中使用ant-design组件库主要是分为基本组件和图标，组件和图标的包是不一样的。

只安装ant-design时使用组件和图标

npm install ant-design-vue
yarn add ant-design-vue

项目中全局引入ant-design

// 引入所有图标
import * as Icons from "@ant-design/icons-vue";
// 全局注册
const app = createApp(App);
Object.keys(Icons).forEach((key: any) => {
   app.component(key, Icons[key])
})
// 添加到全局（可加可不加）
app.config.globalProperties.$icons= Icons
app.use(Antd).use(router).mount('#app')

使用

没有app.config.globalProperties.$icons= Icons

可使用短横线链接的形式或首字母大写的形式

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

有app.config.globalProperties.$icons= Icons

必须使用首字母大写的形式

<template>
  <div>
    <component :is="$icons['StepBackwardOutlined']"></component>
    <component :is="$icons[myicon]"></component>
  </div>
</template>
<script setup>
  import {ref} from 'vue'
  const myicon = ref("RadarChartOutlined")
</script>

单独安装了图标的包时使用图标

npm install @ant-design/icons-vue
yarn add @ant-design/icons-vue

在script中引入

有setup

<script setup>
import { UserOutlined } from '@ant-design/icons-vue';
</script>

没有setup,需要在componets中注册组件

<script>
import { UserOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    UserOutlined
  },
});
</script>

使用

<template>
  <div>
    <UserOutlined/>
  </div>
</template>