部分引入Ant Design Vue的图标

技术 › 踩坑记录
, ,

Ant Design默认引入了所有的图标，打包后占据空间过大，实际使用时项目很可能只用到了一小部分图标，因此只需要部分引入即可。Ant Design官方没有给出部分引入的API，但参考https://github.com/vueComponent/ant-design-vue/issues/1896#issuecomment-600530820和https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579，可以通过以下方式实现部分引入。

提醒：本文中目录位置适用于使用vue-cli创建的标准的项目结构，如果具体项目中目录结构存在不同，请自行调整。

第一步，新建文件src/icons.js，在里面将所有需要引入的图标，按照以下形式列出来。注意，包含Ant Design组件本身使用的图标，以及项目用到的图标，两个部分。

1
2
3
export {
  default as TableOutline
} from '@ant-design/icons/lib/outline/TableOutline';

注意，我们项目中使用图标的方式是类似<a-icon type="line-chart">这样的，只需要指定图标类型type即可，而实际上我们并不清楚这个line-chart对应的是在哪个图标文件中，因此我编写了src/get_icon_export.py脚本（见下），可以方便地根据图标类型type生成对应的export代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import os
import sys


# to custom icon load, meed to manual export icons
# this script accept icon type name, then generate export codes
# usage: python get_icon_export.py line-chart
# output:
# export {
#   default as LineChartOutline
# } from '@ant-design/icons/lib/outline/LineChartOutline';
# afterwards, append output export codes into src/icons.js
# ref: https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

def main():
    icon_type_name = sys.argv[1]

    file_name_list = []
    for root, dirs, files in os.walk('../node_modules/@ant-design/icons/lib/outline/'):  # only support outline icons now
        for f in files:
            if f.endswith('.d.ts'):
                file_name_list.append(f[:-5])

    icon_type_name_camel = ''
    goUpper = True
    for c in icon_type_name:
        if c == '-':
            goUpper = True
        elif goUpper:
            icon_type_name_camel += c.upper()
            goUpper = False
        else:
            icon_type_name_camel += c
    icon_type_name_camel += 'Outline'  # only support outline icons now

    if icon_type_name_camel in file_name_list:
        print('''export {
  default as %s
} from '@ant-design/icons/lib/outline/%s';''' % (icon_type_name_camel, icon_type_name_camel))
    else:
        print('cannot find %s' % icon_type_name_camel)

if __name__ == "__main__":
    main()

使用示例如下所示：

1
2
3
4
$ python get_icon_export.py line-chart
export {
  default as LineChartOutline
} from '@ant-design/icons/lib/outline/LineChartOutline';

将输出的内容复制粘贴到src/icons.js文件内即可。注意，该脚本当前只支持线框风格（outline）的图标。

第二步，在vue.config.js文件中，添加以下配置：

1
2
3
4
5
6
7
8
9
10
11
const path = require("path");

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')  // partial import icons
      }
    },
  }
}

到此为止，即可实现图标部分引入了。

注意，每次使用之前没用过的新图标时，都要按照此方式添加图标引入。