如何在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'>无效，致使图裂

目前尚未兼容性的办法去解决，若是有读者有了兼容性的解决方法，欢迎告知！

---

（完）