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

Using this example: https://ant.design/components/layout/#components-layout-demo-side

How can I add a custom image or icon instead of the default icons.

I tried:

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

But that does not look good or does not respect the collapsed behaviour

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I tried several different ways of creating custom icons, and the one that was easiest and worked best was to use the component property of the antd Icon component. Just give it a functional component that returns whatever image you want to use:

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

This seems to work well within menu items and submenus, except that the icons don’t line up perfectly with the menu text like the built-in icons do. I ended up adding transform: translateY(-3px) to the CSS to compensate for this (might depend on the image you use).

On the other hand, the official solution (for SVG images only) is to use the @svgr/webpack plugin to turn the SVG file into a component. This may have some advantages as far as layout and coloring (antd icons seem to prefer actual <svg> elements over <img> elements with SVG image files). But I’m not sure because I didn’t go to the trouble of setting it up.

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

Method 3

I hope this might be work.
you need handle separate css file and put it this code

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

Method 4

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

need float:”left” in your style


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x