Utilizing Ant Design Icons without an Internet Connection

In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation, I discovered that the icons are using CSS classes.

For instance, the CSS class for the red error "X" on the error modal is as follows:

.anticon-cross-circle:before
{
   content:"\E62E"
}

Being unfamiliar with the CSS content attribute, I visited www.w3schools.com to learn more and experimented with the content value on their Try It page, obtaining the same empty box result experienced in our production environment.

I am seeking advice on how to import these icons into our project so they can be utilized offline. Any insights or tips would be greatly appreciated.

Thank you.

Answer №1

It appears that Ant Design is linking to font definitions in the CSS, causing issues when the computers are offline and unable to locate those fonts.

The documentation mentions that SVG Icons are also available, which should function without an internet connection. I recommend giving this a try by following the implementation steps outlined here: https://ant.design/components/icon/#SVG-icons

Answer №3

To incorporate tabler icons into your project, make sure to include the css file tabler-icons.css and the woff file tabler-icons.woff. Then, within your style.css, define a font-family called tabler-icons using @font-face.

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

The power of absolute paths in React Native 0.72 with TypeScript

Hi everyone! I'm currently having some difficulty setting absolute paths in react native. I tried using babel-plugin-module-resolver, as well as configuring 'tsconfig.json' and 'babel.config.js' as shown below. Interestingly, VS Co ...

TS: A shared function for objects sharing a consistent structure but with varied potential values for a specific property

In our application, we have implemented an app that consists of multiple resources such as Product, Cart, and Whatever. Each resource allows users to create activities through endpoints that have the same structure regardless of the specific resource being ...

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

Creating a Loop for Tabs on an HTML Form

When navigating through form input boxes using the tab key, it usually goes in order. However, I discovered that you can actually customize this order by using tabindex=x. Since I have 5 inputs on my form, I use tabindex 5 times to specify the order. But ...

The sanityClient module is indicating that there is no exported member named 'sanityClient' in the module located at "c:/Users/USER/Documents/..."

I've gone ahead and installed npm i @sanity/client Unfortunately, it's still not working as expected. In my sanity.js file, I added the line export const sanityClient = createClient(config); import type { NextApiRequest, NextApiResponse } ...

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

While experimenting with the makeStyles() function in Material-UI's React library, I encountered a specific error message: The use of hooks is limited to the body of a function component. Below is a snippet of the code that triggered this error: ...

Issue with anchor tag not functioning properly within toggle div

Can you please help me troubleshoot why the anchor tag is not functioning properly within my div elements? When I click on the first div, the second div is displayed but the anchor tag inside the first div does not seem to be working. <script> $(&ap ...

Unexpected output from Material UI Textfield

When attempting to print a page of my React app using window.print(), everything prints correctly except for the Textfield component from Material UI. It works fine when there are only a few lines of text, but when there is a lot of text, it appears like t ...

The navigation bar struggles to display list elements without proper line breaks

Recently, I've been immersed in a web development project for a company. For the navigation bar, I opted to use the FlexNav JQuery plugin. While referencing the example on , I encountered an issue when attempting to add more than 5 list elements; they ...

How do I go about customizing the SpeedDialAction label with MUI v5?

I have a goal to customize our SpeedDial component in the following ways: Ensure that the labels (tooltips) are always visible Make sure the labels are wide enough to display the full text without wrapping To achieve the first part, I found out that sett ...

Crafting a template for mixing up images and quotes without any specific connection - here's how!

I came across some interesting templates that can generate random quotes and others that create random pictures. My goal is to develop a template that generates both a random quote and a random picture, similar to this example, without any relation betwee ...

Tips for resolving import errors encountered after running npm start

I recently started using React and I am currently following a tutorial. Even though I have the exact same code as the tutorial, I'm encountering the following error. ./src/index.js Attempted import error: './components/App' does not have a ...

What is the alternative method in JavaScript for locating items instead of using indexOf?

I have a set of paths in an array. Some paths are classified as constants while others are labeled as dynamic. A constant path would be something like "/booking-success", whereas a dynamic path could be something like '/arrival/view/:job_or ...

Tips on leaving comments inside a render <div>

Hey there! I'm facing an unusual issue in my React+Webpack project. Even though I marked a line as a comment using //, it still gets rendered in the HTML output. Strangely, I have never encountered this problem before and can't figure out what tr ...

Tips for modifying the height of a bootstrap-vue table and enabling scrolling with a fixed header

I have a div containing a b-table that I need help adjusting the height for. I want to make the table scrollable with a fixed header. Can anyone assist me? Here is my code: Code inside the template: <div class="tbl-barangay"> <b-table stripe ...

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

What is the procedure for creating an array that contains elements taken sequentially from various arrays?

I am looking to extract specific elements from a given array: const initArray = [ { '18888': [ { unitId: 1, venueId: 18888, }, { unitId: 2, venueId: 18888, }, ], }, { &apos ...

Monitor the true/false status of each element within an array and update their styles accordingly when they are considered active

Currently, I am attempting to modify the active style of an element within an array. As illustrated in the image below - once a day is selected, the styles are adjusted to include a border around it. https://i.stack.imgur.com/WpxuZ.png However, my challe ...

The toggle feature of the Bootstrap responsive navbar is not functioning properly

I am currently implementing Twitter Bootstrap in a Rails project, but I'm encountering issues with the responsive navbar. When I resize the screen, the menu toggle button appears along with the navbar options open below it. Upon further shrinking, the ...

When InputProps attribute "max" is used with TextField, it malfunctions when the input is entered manually

I am attempting to display a MUI TextField using the code provided below: <TextField variant="standard" type="number" InputProps={{ inputProps: { min: 0, max: 5 } }} onChange={(e) => { e.stopPropagation(); // some ...