如何在 ANTD 设计菜单中添加自定义图像/图标？答案

【问题标题】：How to add a custom image/icon in ANTD Design menu?如何在 ANTD 设计菜单中添加自定义图像/图标？
【发布时间】：2018-07-16 15:08:24
【问题描述】：

使用这个例子：https://ant.design/components/layout/#components-layout-demo-side

如何添加自定义图像或图标而不是默认图标。

我试过了：

<Menu.Item to="/" key="2">
  <img className="ant-menu-item" src={require('image.png')} />
  <span>Shopify</span>
  <Link to="/shopify">Home</Link>
</Menu.Item>

但这看起来不太好或不尊重折叠的行为

【问题讨论】：

official Ant Design docs 有一个专门用于此的部分。他们的教程有你需要的所有代码。

标签： javascript css reactjs antd

【解决方案1】：

我希望这可能有效。您需要处理单独的 css 文件并将其放入此代码

.ant-menu-item{background-image: url("theme5.jpg");}

【讨论】：

【解决方案2】：

<Menu.Item to="/" key="2">
    <img className="ant-menu-item" src=="{{ "image.png" | asset_url }}"/>
    <span>Shopify</span>
    <Link to="/shopify">Home</Link>
</Menu.Item>

【讨论】：

我无法让它在当前版本的 antd (3.23.1) 中工作。请参阅我的答案以了解我的解决方法。

【解决方案3】：

我尝试了几种不同的方法来创建自定义图标，其中最简单且效果最好的一种方法是使用 antd Icon 组件的 component 属性。只需给它一个功能组件，它会返回您想要使用的任何图像：

<Icon component={() => (<img src="/image.svg" />)} />

这似乎在菜单项和子菜单中运行良好，只是图标不像内置图标那样与菜单文本完美对齐。我最终在 CSS 中添加了 transform: translateY(-3px) 以弥补这一点（可能取决于您使用的图像）。

另一方面，official solution（仅适用于 SVG 图像）是使用@svgr/webpack plugin 将 SVG 文件转换为组件。就布局和着色而言，这可能具有一些优势（antd 图标似乎更喜欢实际的 <svg> 元素，而不是带有 SVG 图像文件的 <img> 元素）。但我不确定，因为我没有费心去设置它。

【讨论】：

您是否能够在 config.ts 的路线/菜单中扩展自定义图标的使用？

【解决方案4】：

icon:<img src="/static/icons/BH_tainan.svg"  height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,

需要 float:"left" 符合您的风格

【讨论】：