问题
I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
回答1:
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
回答2:
Have you tried downloading the icon library into your project folder? https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
来源：https://stackoverflow.com/questions/59394428/use-of-ant-design-icons-while-offline