Antd Icon组件使用自己定义图标

根据Antd文档Icon组件使用自定义图标，先引入svg文件，然后传入component：

import { Icon } from 'antd';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.

ReactDOM.render(<Icon component={MessageSvg} />, mountNode);

但是，在项目中，引入一个svg文件，会被转成base64格式的图片。
因为原先的引入svg文件用的是url-loader，因此会有一些问题。

要解决这个问题也比较简单。
一、原先的svg还是用url-loader
二、需要当字体图标用@svgr/webpack，并命名为 *.nobase64.svg

具体步骤：

1. 安装@svgr/webpack

npm i -D @svgr/webpack

2. 将配置webpack

{
        test: /\.(otf|eot|svg|ttf|woff|woff2).*$/,
        exclude:/\.nobase64.svg$/,
        loader: 'url-loader?limit=10000'
 }

3. 新增webpack配置

{
        test: /\.nobase64.svg$/,
        use: [
          {
            loader: 'babel-loader',
          },
          {
            loader: '@svgr/webpack',
            options: {
              babel: false,
              icon: true,
            },
          },
        ]
      }

参考文档

• https://www.npmjs.com/package/@svgr/webpack
• https://ant.design/components/icon-cn/#header