Starting from
Language finches document

preface

For those of you who have used AnTD Icon, createFormiconFontCN is described as:

https://ant.design/components/icon-cn/#components-icon-demo-iconfont

Use is outside the chain way

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

For Intranet developers

For Intranet developers, there is no way to connect to the outer network, and therefore no way to use the outer chain. However, if we use public static method, we can better solve the problem of icon resource localization. That’s what I started with.

Step 1: Place the required font script in the public directory


Step 2: Write the relative path string of the font script in the scriptTurl of CreateFromiconFontCN 

import { createFromIconfontCN } from '@ant-design/icons';

const IconFont = createFromIconfontCN({
  scriptUrl: './font_8d5l8fzk5b87iudi.js',
});

ReactDOM.render(
  <div className="icons-list">
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </div>,
  mountNode,
);

For micro front-end application developers

However, for micro front-end application developers (like us), public statics is still not enough to solve the problem of icon resource localization. Because once the child application is embedded in the base, since the IP domain in the browser is no longer the IP domain of the child application, if the request does not explicitly specify the IP domain, the request will default to the IP domain in the browser (although it is mostly umi+ Qiankun, which handles most requests for me). Let the request still point to the static resource service of the child application), as shown in Figure 1:

The correct path for font should be:
http:// child application IP: child application port /fo….


But since the child application is running on the base (i.e., the main application) and is using a relative path, you can see that the resource request URL that is issued is changed to:
http:// master application IP: master application port /fo…“, which is clearly not correct. A 404 error is reported.

My solution

To be honest, this is not difficult to understand, but at that time suddenly did not think, I also wrote a logical method to obtain the corresponding application address according to the application name, and the path splicing with the icon resource file. 😂 😂 😂

I searched a lot on the Internet, only found the official way of external chain and public static way to solve the localization of icon resources, but I did not see the following solution. In my opinion, addressing icon resource localization without more time to explore umi configuration is the quickest solution.

The font script of Iconfont is essentially a JS script, so you can require it directly 

const IconFont = Icon.createFromIconfontCN({ scriptUrl: require('.. /assets/js/font_8d5l8fzk.js'), });

Of course, there is another way, that is: Intranet/extranet CDN/OSS