AntD Vue 组件库 icons 按需导入

前言

本文介绍一种方法，用一段简洁的代码实现AntD Vue组件库的 icons 按需导入，只需在项目中导入一次，便可以随时使用，减小依赖体积。

场景

在官网的示例中，我们看到AntD Vue组件库升级到version@4.2.3之后，导入icons就是按需导入

<template>
	<home-outlined />
</template>

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

需求

解决

在 ./plugins/customComponents.js 文件里导入所有第三方库的依赖，在进行全局注册，就可以在组件中随需随用，以下是该文件的示例：

import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import Highcharts from "highcharts"
import StockModule from "highcharts/modules/stock"
import FullscreenModule from "highcharts/modules/full-screen"
import HighchartsVue from "highcharts-vue"
import ExportingModule from "highcharts/modules/exporting"
import ExportDataModule from "highcharts/modules/export-data"
import {
  ExperimentOutlined,
  AreaChartOutlined,
  CloseOutlined,
  DeleteOutlined,
  DownloadOutlined,
  DotChartOutlined,
  EditOutlined,
  FullscreenOutlined,
  LineChartOutlined,
  LogoutOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
  StarFilled,
  StarOutlined,
  TableOutlined,
  UserOutlined
} from "@ant-design/icons-vue"

ExportingModule(Highcharts)
ExportDataModule(Highcharts)
FullscreenModule(Highcharts)
StockModule(Highcharts)

Highcharts.setOptions({
  global: {
    useUTC: false,
  },
})

/**
 * 全局注册自定义组件
 * @param app
 */
export function setupCustomComponents(app) {
  app.use(VXETable)
  app.use(HighchartsVue)
  const Icons = {
    ExperimentOutlined,
    AreaChartOutlined,
    CloseOutlined,
    DeleteOutlined,
    DownloadOutlined,
    DotChartOutlined,
    EditOutlined,
    FullscreenOutlined,
    LineChartOutlined,
    LogoutOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    MinusCircleOutlined,
    PlusCircleOutlined,
    StarFilled,
    StarOutlined,
    TableOutlined,
    UserOutlined
   }
  app.config.globalProperties.$icons = Icons
  Object.keys(Icons).map(key => {
    app.component(key, Icons[key])
  })
}

那么在项目中需要使用icons时，第一步在./plugins/customComponents.js 文件中是否已经导入并注册，第二步是按照如下方法使用：

<template>
	<component :is="$icons['DeleteOutlined']"></component>
</template>