根據(jù)Antd文檔Icon組件使用自定義圖標(biāo)，先引入svg文件，然后傳入component：

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

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

但是，在項(xiàng)目中，引入一個(gè)svg文件，會(huì)被轉(zhuǎn)成base64格式的圖片。
因?yàn)樵鹊囊雜vg文件用的是url-loader，因此會(huì)有一些問題。

要解決這個(gè)問題也比較簡單。
一、原先的svg還是用url-loader
二、需要當(dāng)字體圖標(biāo)用@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