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

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

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

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

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

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

Answer 3

我希望这可能有用。你需要处理单独的css文件并把它代码

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

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 Design菜单中添加自定义图像/图标？

4 个答案: