Ant Design Vue icon 打包优化(附组件所需 icon )

补充

Antd Vue 2.x 版本后 icon 需要额外npm 引入，应该是解决了需要手动按需引入的问题， 可以尝试升级版本

正文

最近在尝试对项目进行优化，在网上看到了对 antd 库中 icon 文件的优化方法，核心思想是通过 webpack alias 手动指定用到按需引入的 icon 文件 。

// wepack.config.js
module.exports = {
    resolve: {
      alias: {
        "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
      }
    }
};

// icons.js
export {
  default as HomeOutline
} from '@ant-design/icons/lib/outline/HomeOutline'
export {
  default as SlidersOutline
} from '@ant-design/icons/lib/outline/SlidersOutline'
export {
  default as TransactionOutline
} from '@ant-design/icons/lib/outline/TransactionOutline'

试验过后发现 antdv 中一些组件的 icon 也不显示了，显然是因为 icons.js 中没有导入所需的 icon
因此自己整理了一份组件所需 icon。

/**@ant-design-vue */
/** version 1.6.3*/
// alert form progress 
export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill';
// alert form modal progress result
export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline';
// alert 
export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill';
// alert modal
export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline';
// alert date-picker form input progress result select time-picker transfer tree-select
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill';
// alert date-picker form modal notification progress
export { default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline';
// alert form popconfirm result
export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill';
// alert form modal
export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline';
// breadcrumb color-picker input-number select table tabs tree-select
export { default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline';
// button form input message select switch timeline tree tree-select upload
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline';
// cascader
export { default as RedoOutline } from '@ant-design/icons/lib/outline/RedoOutline';
// collapse dropdown layout pagination tabs
export { default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline';
// date-picker
export { default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline';
// drawer progress select tabs tag tree-select
export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline';
// dropdown
export { default as EllipsisOutline } from '@ant-design/icons/lib/outline/EllipsisOutline';
// input upload
export { default as EyeOutline } from '@ant-design/icons/lib/outline/EyeOutline';
// input 
export { default as EyeInvisibleOutline } from '@ant-design/icons/lib/outline/EyeInvisibleOutline';
// input transfer
export { default as SearchOutline } from '@ant-design/icons/lib/outline/SearchOutline';
// input-number tabs
export { default as UpOutline } from '@ant-design/icons/lib/outline/UpOutline';
// layout
export { default as BarsOutline } from '@ant-design/icons/lib/outline/BarsOutline';
// layout pagination tabs
export { default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline';
// modal
export { default as QuestionCircleOutline } from '@ant-design/icons/lib/outline/QuestionCircleOutline';
// page-header
export { default as ArrowLeftOutline } from '@ant-design/icons/lib/outline/ArrowLeftOutline';
// pagination
export { default as DoubleLeftOutline } from '@ant-design/icons/lib/outline/DoubleLeftOutline';
// pagination
export { default as DoubleRightOutline } from '@ant-design/icons/lib/outline/DoubleRightOutline';
// progress select steps
export { default as CheckOutline } from '@ant-design/icons/lib/outline/CheckOutline';
// rate
export { default as StarFill } from '@ant-design/icons/lib/fill/StarFill';
// result
export { default as WarningFill } from '@ant-design/icons/lib/fill/WarningFill';
// table
export { default as FilterFill } from '@ant-design/icons/lib/fill/FilterFill';
// table 
export { default as CaretUpFill } from '@ant-design/icons/lib/fill/CaretUpFill';
// table tree tree-select
export { default as CaretDownFill } from '@ant-design/icons/lib/fill/CaretDownFill';
// tabs
export { default as PlusOutline } from '@ant-design/icons/lib/outline/PlusOutline';
// time-picker
export { default as ClockCircleOutline } from '@ant-design/icons/lib/outline/ClockCircleOutline';
// tree
export { default as FileOutline } from '@ant-design/icons/lib/outline/FileOutline';
// tree
export { default as FolderOpenOutline } from '@ant-design/icons/lib/outline/FolderOpenOutline';
// tree
export { default as FolderOutline } from '@ant-design/icons/lib/outline/FolderOutline';
// tree 
export { default as MinusSquareOutline } from '@ant-design/icons/lib/outline/MinusSquareOutline';
// tree
export { default as PlusSquareOutline } from '@ant-design/icons/lib/outline/PlusSquareOutline';
// upload
export { default as PaperClipOutline } from '@ant-design/icons/lib/outline/PaperClipOutline';
// upload
export { default as PictureTwoTone } from '@ant-design/icons/lib/twotone/PictureTwoTone';
// upload
export { default as FileTwoTone } from '@ant-design/icons/lib/twotone/FileTwoTone';
// upload 
export { default as DeleteOutline } from '@ant-design/icons/lib/outline/DeleteOutline';
// upload
export { default as DownloadOutline } from '@ant-design/icons/lib/outline/DownloadOutline';

更多

但是这样手动导入显得不够专业，所以后面打算通过编写 webpack 或 babel 插件来实现自动更新 icons 文件。