Can anyone help me figure out how to replace the default icons with a custom image or icon in this example: https://ant.design/components/layout/#components-layout-demo-side
I attempted to do it by including the following code:
<Menu.Item to="/" key="2">
<img className="ant-menu-item" src={require('image.png')} />
<span>Shopify</span>
<Link to="/shopify">Home</Link>
</Menu.Item>
However, the result does not look aesthetically pleasing and it disrupts the collapsed behaviour.
When attempting to create custom icons, I experimented with various methods and found that the simplest and most effective approach was using the component property of the antd Icon component. By providing a functional component that returns the desired image, you can easily implement custom icons:
<Icon component={() => (<img src="/image.svg" />)} />
While this method works well within menu items and submenus, it may not align perfectly with the menu text like the default icons. To address this issue, I had to apply transform: translateY(-3px) in the CSS to adjust the positioning (this adjustment may vary depending on the image used).
Alternatively, the official recommendation (specifically for SVG images) suggests utilizing the @svgr/webpack plugin to convert the SVG file into a component. This approach could offer benefits in terms of layout and coloring, as antd icons appear to favor actual <svg> elements over <img> elements with SVG files. However, I did not personally explore this option.
<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>
Although this question may be old, I wanted to share an alternative solution for those who prefer not to use webpack as recommended in the documentation. You can create your own SVG component and then pass it to the antd icon component.
Here is a simple example:
// Icons.tsx
export const MyIcon = () => {
return (
<svg>
// svg path data
</svg>
);
};
Then, in your code:
// app.tsx
import Icon from "@ant-design/icons";
import { MyIcon } from "./Icons";
const App = () => {
return (
<Icon component={MyIcon} />
)
}
I tested this in a sandbox and it appears to work well. I used antd version 4.23.3 for testing. However, you may need to make some adjustments to the styling depending on your specific requirements.
With a little tweaking, this solution should do the trick. Simply save your CSS styles in a separate file and then include the following code snippet:
.ant-menu-item{background-image: url("theme5.jpg");}
icon:<img src="/static/icons/BH_tainan.svg" height={20} style={{margin:"0 12px 0 0" ,paddingTop:10 ,float:"left"}}/>,
ensure that the float attribute is set to "left" in your styling
Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...
function generateRandomNumbers(){ var max = document.getElementById('max').value; var min = document.getElementById('min').value; var reps = document.getElementById('reps').value; var i; for (i=0; i<reps ...
Why does the loading image not appear at the center bottom of the page in IE? This function loads content when the page is loaded and also loads content when scrolled to the bottom. When you load the page index.php, you will see the loading image at the ...
We are currently integrating Typescript into an existing node project written in JS to facilitate ongoing refactoring efforts. To enable Typescript, I have included a tsConfig with the following configuration: { "compilerOptions": { "target": "es6", ...
My goal is to create multiple state variable names based on data stored in an array that is already a state variable. The number of variables required can vary from one page load to the next, so I cannot initialize them right away. I have devised a functi ...
For my project using react-three-fiber, I am working on creating a 3D house. I decided to incorporate GLTF models for the doors in the house. Initially, rendering one door worked perfectly fine. However, when I attempted to render two doors from the same ...
Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...
I am currently working on a website using jQuery, and I have implemented a slide in and out div to display share buttons. The issue I am facing is that the code works perfectly on the first page, but on every other page, the div slides out momentarily and ...
Currently, I have two scripts in place. The first script is responsible for fetching a specific set of child nodes from an XML file through AJAX and using them to create a menu displayed as a list of buttons within #loadMe. What's remarkable about thi ...
Looking to extract variables from a post request made by Javascript. Upon inspecting the received variables in my view, I found the following: >>> print request.body {"p":"testprd","cash":false,"cheque":true,"debit":false,"credit":true} The valu ...
I am experiencing an issue with loading a div populated by ajax. The datepicker does not seem to be called when the content is loaded this way. Initially, I had the datepicker loaded in the header of the main page, but even after trying to load it within ...
const DonorsTables = () =>{ const [search, setSearch] = useState(""); const [countries, setCountries] = useState([]); const [filteredcountries, setFilteredCountries] = useState([]); const getCountries = async () => { try { ...
I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...
After successfully displaying an element on radio button selection, I encountered the issue of the selected element remaining visible when another radio button in the group is chosen. What aspect am I overlooking? Regarding hiding elements with vanilla Ja ...
Looking to integrate Bootstrap 5 toasts into my ASP.NET web application, I have the code below. HTML <div class="row"> <div class="toast" id="companyUpdOK" name="compa ...
I have a fixed width column and a fluid column. In the fluid column, I want to display a string with nowrap so that it does not overflow the container. Here is an illustration of how I want the text to appear: --------------------------------------------- ...
The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...
I am puzzled as to why the return statements in App.js are executed 3 times during page refreshes. Here is my Index.js: import React from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-route ...
My Python for loop is iterating through these HTML template cards, each accompanied by JavaScript. However, I'm encountering an issue where the JavaScript only seems to work on the first element (specifically, it's meant to retrieve the seeked po ...
My goal is to create a reusable component, but I encounter an error when I try to wrap this component into another wrapped component. I am specifically using SCSS classes and avoiding styled-components. Below is the non-reusable component: <Input ...