如何将svg导入antd -> Icon组件

嘿，我正在尝试将自己的 svg 导入到 antd -> Icon 组件中 就像在文档 https://ant.design/components/icon/但我有一个例外

InvalidCharacterError：无法执行“createElement” 'Document'：提供的标签名称 ('/static/media/archive-solid.3c305173.svg') 不是有效名称。

我使用create React app 2.1.1和antd版本3.10.3 我不想创建 React 应用程序弹出并且我无法访问 webpack 有任何想法吗。 代码：

import React, { Component } from "react";
import { Layout, Menu, Icon } from "antd";
import ArchiveSVG from "../../../img/icons/archive-solid.svg";

const { Sider } = Layout;

class SideBar extends Component {
state = {
  collapsed: false
};

onCollapse = collapsed => {
  this.setState({ collapsed });
};

render() {
 return (
   <Sider
     collapsible
     collapsed={this.state.collapsed}
     onCollapse={this.onCollapse}
   >
     <div className={styles.logo} />
     <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
       <Menu.Item key="4">
         <Icon component={ArchiveSVG} />
         <span>Products</span>
       </Menu.Item>
     </Menu>
   </Sider>
 );
}
}

这个方法对我有用

import ArchiveSVG from "../../../img/icons/archive-solid.svg";

const archive = () => (
   <img src={ArchiveSVG} />
);

然后像这样使用

<Icon component={archive} />

快乐编码:-)