如何在 ANTD 设计菜单中添加自定义 image/icon？

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

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

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

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>

Answer 3

我尝试了几种不同的方法来创建自定义图标，最简单且效果最好的一种是使用 antd Icon 组件的 component 属性。只需给它一个功能组件，returns 无论你想使用什么图像：

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

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

另一方面，official solution (for SVG images only) is to use the @svgr/webpack plugin将SVG文件变成组件。就布局和着色而言，这可能有一些优势（antd 图标似乎更喜欢实际的 <svg> 元素，而不是带有 SVG 图像文件的 <img> 元素）。但我不确定，因为我没有费心去设置它。

Answer 4

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

需要 float:"left" 在你的风格中

如何在 ANTD 设计菜单中添加自定义 image/icon？

How to add a custom image/icon in ANTD Design menu?

javascript

css

reactjs

antd