部分引入Ant Design Vue的图标

Ant Design默认引入了所有的图标,打包后占据空间过大,实际使用时项目很可能只用到了一小部分图标,因此只需要部分引入即可。Ant Design官方没有给出部分引入的API,但参考https://github.com/vueComponent/ant-design-vue/issues/1896#issuecomment-600530820https://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
}
},
}
}

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

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