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

Question

嘿，我正在尝试将我自己的 svg 导入 antd -> Icon 组件
就像在 documentation但我有一个异常(exception)

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/archive-solid.3c305173.svg') is not a valid name.

我使用的是 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>
 );
}
}

Answer 1

import Icon from '@ant-design/icons';
import { ReactComponent as USAFlagIcon } from "./usa-flag.svg";

const USFlag = () => <Icon component={USAFlagIcon} />

同样要更改自定义图标的颜色，您需要删除 SVG 属性。 (我正在使用 svgo .. * how to us it? * config file )