Using antd icons in CSS pseudo-elements effectively involves leveraging the ::before or ::after

Currently, I have an icon displaying like this:

import { Icon } from "antd";
...

// within a react component:
<div className="someclass">
  <Icon type="thunderbolt" /> 
</div>

What I really aim to achieve is to use CSS to display the icon, like so:

div.someclass::before {
  content: "\E6EA"; // imagine this is the correct thunderbolt icon code
}

I'm wondering if icons in antd are not using a font but rather direct SVG. Does this mean that inserting icons with CSS is not possible with antd?

Answer №1

Unfortunately, CSS pseudo-elements are no longer allowed, as they have been replaced by SVG (starting from version 3.9.0). For more information on this change, you can check out the details here and the discussion on the matter here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delete the record in React and then direct the user to the Dashboard Page with the state updated

I am trying to delete a specific record while on its detailed page and then redirect the user back to the main list page. The code I have currently allows me to delete the record, but I encounter an error: TypeError: Cannot read property 'xxx' o ...

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

Attempting to align navigation bar in the middle of the page

I'm facing some issues with centering the navigation bar on my website. I attempted to use a wrapper div to center it, but unfortunately, it didn't work out as expected. The only thing that seems to be working within that div is adjusting the lef ...

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...

Enhancing bar border with the addition of a separator

Our current situation is similar to this: https://i.stack.imgur.com/Luj1S.png but our goal is to have a chart with separators on both sides of the age brackets, like this: https://i.stack.imgur.com/03UpO.png In order to achieve this, we have utilized t ...

Creating a hover state for a CSS class seems straightforward, but I'm finding it a bit tricky

I am looking to customize my inline menu by changing the last menu item to a different colored box with unique text. I have successfully applied a custom style using the #navbar a.blogbox class, but I am struggling to figure out how to change the hover s ...

Are React component properties enclosed in curly braces?

I have a new component configured like this: type customType = differentType<uniqueType1, uniqueType2, uniqueType3>; function customComponent({q}: customType) When called, it looks like this: <customComponent {...myCustomVar} />, where myCus ...

Is there a way to implement a table footer with a fixed position?

Currently, I am working with React along with the Material UI framework. Is there a way to keep the last row of a table fixed in its position? This means that as you scroll down the page, this specific row will always remain visible at the bottom. I have ...

Implementing conditional rendering of elements based on the onSelect event in React JS

For each option selected, a specific number of buttons should appear beneath the dropdown menu. Since this number varies for each option, should I use JSON to define the buttons? I'm feeling confused and would appreciate any guidance on how to proceed ...

React's useState hook is not correctly updating the state variables when the form is submitted

const [user, setuser] = useState({ name: '', lastName: '', pass: '', mail: '', uName: '' }) const [nameError, setNameError] = useState(''); const [lastNameError, setLastNameError] = useState( ...

Setting the state for an array of objects in React: a comprehensive guide

Suppose I have an array of objects representing people and their powers like so: const [peoples, setPeople] = useState[ {name: 'Sam', power: 0}, {name: 'Tam', power: 0}, {name: 'Lam', power: 0}, {name: ...

Unable to interact with web element

When using selenium, I have a web element that I want to select. The WebElement.IsDisplayed() method returns true, but I am unable to perform the webelement.click() operation. port_dimension = canvas.find( By.xpath( "//*[local-name() = 'rect'][ ...

The Reactjs infinite scroll feature continuously displays fresh data

Every time I scroll, my data is always rendering on page 2 and page 1 disappears, and the items.concat function is not working properly. My fetch data code looks like this: const FetchUrl = async (p) =>{ const Url = await fetch(`api-link=${p}`); ...

Activate Firebase Analytics after obtaining authorization

I'm currently working on implementing Firebase's Google Analytics for my Nextjs App. However, there is a hurdle as I reside in Germany and can only use Analytics after obtaining user Opt-in consent. This is how my configuration is set up: impor ...

13 Helpful Tips for Resolving Hydration Failure Due to Discrepancy in Custom Dropdown Display between Server and UI

Recently, I embarked on a project utilizing the latest version 13 of Next.js with its new app directory feature. As I integrated a custom dropdown into one of my pages, an error surfaced: "Hydration failed because the initial UI does not match what was ren ...

What could be causing my dropdown menu to not appear when clicked?

I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...

Tips for choosing a sibling element on hover using CSS

I'm having trouble figuring out how to make the rect element change color to purple when the text is highlighted. Right now, only the text color is changing. Is there a way to achieve this using just CSS? The goal is for the rect to turn purple on ho ...

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...