扩充antd的Icon图标库

一、功能介绍

项目中有个菜单图标支持配置的功能,如下请添加图片描述

二、遇到的问题

上面的图标都是antdIcon组件自带的,只需要给Icon传不同的type就可以显示出来不同的图标,但是我现在需要将自己的图标也放到这个里面,而且实现通过传个type就能显示的功能。

三、解决方案

通过查找资料我发现可以在node_modules里面直接改源码达到想要的效果。如下:
在这里插入图片描述
添加代码的位置如下:
在这里插入图片描述
划红线的是我自定义的,按照这个格式添加即可,其中newViewBox后面的一大串字符是svg图片里面的path里的d=后面的字符串进行通过空格拼接组成的。注意这里光改了还不行,想要使用需要在src/constants/index.js里面声名他叫什么,注意和红色框中的名字一致。
在这里插入图片描述

四、图标显示并不完美

但是并不是所有的svg通过这种方法都可以完美显示,如下:在这里插入图片描述

因为antd的Icon组件已经规定了svg显示的时候:viewBox=“64 64 896 896”,所以我们对svg图片是有要求的,
我们需要ui给我们的svg图片是个画布大小1024,但是边距是64的图标,告诉UI,x:512,y:512,这里的xy指的是中心点的坐标,这里我们指定512刚好中心在图标中间。要是设置成x:0,y:0,可能图标只能显示一半,就像我们上面的图标一样显示不全。
在这里插入图片描述
成功显示的图标如下:在这里插入图片描述

五、最终成果展示

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_46412825/article/details/127902593