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

【问题标题】：How to import svg into antd -> Icon component如何将 svg 导入 antd -> Icon 组件
【发布时间】：2019-04-18 17:54:15
【问题描述】：

嘿，我正在尝试将我自己的 svg 导入 antd -> 图标组件就像在documentation 中一样，但我遇到了一个例外

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

我正在使用 create react app 2.1.1 和 antd 版本 3.10.3 我不想创建反应应用程序弹出并且我不访问 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>
 );
}
}

【问题讨论】：

archive-solid.svg 在哪里？在src/ 文件夹之外？
你试过这种方法吗：stackoverflow.com/questions/52344200/…

标签： svg create-react-app antd

【解决方案1】：

简化您的 svg 并导出为 JSX，如下所示

import React from 'react';

export default () => <svg viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
    <path fill="currentColor" d="M8.309 189.836L184.313 37.851C199.719 24.546 224 35.347 224 56.015v80.053c160.629 1.839 288 34.032 288 186.258 0 61.441-39.581 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 45.344-145.012-21.507-183.51-176.59-185.742V360c0 20.7-24.3 31.453-39.687 18.164l-176.004-152c-11.071-9.562-11.086-26.753 0-36.328z">
    </path>
</svg>

然后使用就像

<Icon component={RepySVG} />

请创建一个代码笔以获得更多帮助。

【讨论】：

【解决方案2】：

您需要在webpack.config.js中添加以下行，以便直接将SVG作为组件导入。

            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: '@svgr/webpack',
                        options: {
                            babel: false,
                            icon: true,
                        },
                    },
                ],
            }

Related doc

【讨论】：

【解决方案3】：

这个方法对我有用

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

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

然后这样使用

<Icon component={archive} />

编码愉快 :-)

【讨论】：

【解决方案4】：

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）

【讨论】：