如何在 ANTD Design 菜单中添加自定义图像/图标？

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

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

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

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

另一方面，官方的解决方案（仅适用于 SVG 图片）是使用@svgr/webpack 插件将 SVG 文件变成组件。就布局和着色而言，这可能有一些优势（antd 图标似乎更喜欢实际<svg>元素而不是<img>带有 SVG 图像文件的元素）。但我不确定，因为我没有去设置它的麻烦。

Answer 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>