如何在antdPro中使用自定義SVG圖標？

一、項目使用的是svg圖片，通常這樣調用：

import CustomIcon from './aa.svg';

render(){
  return(<img src={CustomIcon}/>)
}
複製代碼

或者是這樣：
使用 js 文件來存儲 svg，並能直接在<Icon>組件中使用：

dd.js：

import React from 'react';
const cc = props => (
  <svg width="1em" height="1em" viewBox="0 0 28 28" >
    <g stroke="xxx" strokeWidth={2} fill="none" fillRule="evenodd">
      <path d="xxx" strokeLinecap="xxx" />
    </g>
  </svg>
);

export default bb;
複製代碼

使用：

import bb from './dd'
render(){
  return(<Icon component={bb} />)
}
複製代碼

可是！不能直接將svg做爲Icon的component：
ee.svg：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" xxx>
    <desc></desc>
    <g xxx></g>
</svg>
複製代碼

ff.js:

import Ee from './ee.svg'
render(){
  return(<Icon component={Ee} />)
}
複製代碼

這樣程序報錯

---

二、將自定義SVG直接做爲Icon組件的注意點以下：

以上截圖出自antd的Icon組件

---

三、可是我使用的antdPro框架，配置文件是config.js和 plugin.config.js，沒有webpack.config.js文件，因此不知道怎麼配置webpack，如何解決？

解決方案：
（1）在config.js中添加這行代碼：

urlLoaderExcludes: [/.svg$/],
複製代碼

（2）在plugin.config.js中添加

    config.module
      .rule('svg')
      .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
      .use([
        {
          loader: 'babel-loader',
        },
        {
          loader: '@svgr/webpack',
          options: {
            babel: false,
            icon: true,
          },
        },
      ])
      .loader(require.resolve('@svgr/webpack'));
複製代碼

參考：umirc 配置支持 ant-design Icon 自定義 svg 圖標 #1078

（3）安裝svgr/webpack

npm install @svgr/webpack
複製代碼

參考：@svgr/webpack

（4）直接在Icon中使用自定義SVG，並使用 component的屬性

import Gggg from './gggg.svg'
<Icon 
  component={()=><Gggg  fill="#00CC33" width="100" height='100'/>}
/>
複製代碼

這樣就能使用了。

四、可是，這樣會致使項目以前使用<img>標籤來調用svg的方法失效！

import CustomIcon from './aa.svg';

render(){
  return(<img src={CustomIcon}/>)
}
複製代碼

項目會報一個錯誤：
Invalid value for prop src on tag. Either remove it from the element
也就是說會讓<img scr='xxx'>無效，致使圖裂

目前尚未兼容性的辦法去解決，若是有讀者有了兼容性的解決方法，歡迎告知！

---

（完）