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

Question

使用这个例子: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>

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

Answer 1

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

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

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

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