如何将 svg 导入 antd ->图标组件 [英] How to import svg into antd -> Icon component
问题描述
嘿,我正在尝试将我自己的 svg 导入 antd -> Icon 组件就像在文档中一样,但我有一个例外
Hey I am trying to import my own svg into antd -> Icon component like in the documentation but i got an exception
InvalidCharacterError: 无法执行 'createElement''Document':提供的标签名称('/static/media/archive-solid.3c305173.svg') 不是有效名称.
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我不想创建反应应用程序弹出,我不访问 webpack有任何想法吗.代码:
Im using create react app 2.1.1 and antd version 3.10.3 I would not want to do the create react app eject and i dont access to webpack any ideas. that the code:
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 Icon from '@ant-design/icons';
import { ReactComponent as USAFlagIcon } from "./usa-flag.svg";
const USFlag = () => <Icon component={USAFlagIcon} />
还要更改自定义图标的颜色,您需要删除 SVG 属性.(我正在使用 svgo .. *我们怎么做? *配置文件 )
Also to change the color of custom icon you need to remove SVG attributes. (I'm using svgo .. *how to us it? *config file )
这篇关于如何将 svg 导入 antd ->图标组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!