一、功能介紹

項目中有個菜單圖標支持配置的功能，如下

二、遇到的問題

上面的圖標都是antdIcon組件自帶的，只需要給Icon傳不同的type就可以顯示出來不同的圖標，但是我現(xiàn)在需要將自己的圖標也放到這個里面，而且實現(xiàn)通過傳個type就能顯示的功能。

三、解決方案

通過查找資料我發(fā)現(xiàn)可以在node_modules里面直接改源碼達到想要的效果。如下：

添加代碼的位置如下：

劃紅線的是我自定義的，按照這個格式添加即可，其中newViewBox后面的一大串字符是svg圖片里面的path里的d=后面的字符串進行通過空格拼接組成的。注意這里光改了還不行，想要使用需要在src/constants/index.js里面聲名他叫什么，注意和紅色框中的名字一致。

四、圖標顯示并不完美

但是并不是所有的svg通過這種方法都可以完美顯示，如下：

因為antd的Icon組件已經(jīng)規(guī)定了svg顯示的時候：viewBox=“64 64 896 896”，所以我們對svg圖片是有要求的，
我們需要ui給我們的svg圖片是個畫布大小1024，但是邊距是64的圖標，告訴UI，x:512,y:512,這里的xy指的是中心點的坐標，這里我們指定512剛好中心在圖標中間。要是設(shè)置成x:0,y:0，可能圖標只能顯示一半，就像我們上面的圖標一樣顯示不全。

成功顯示的圖標如下：

五、最終成果展示

總結(jié)

以上是生活随笔為你收集整理的扩充antd的Icon图标库的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。