在微前端中，antd icon createFormIconfontCN 的在地化問題

首發於 語雀檔案

前言

用過 antd icon 的朋友們可能知道，其中介紹的用法是：

https://ant.design/components/icon-cn/

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,
);

可以看出，提供的是：（相對路徑引入 / 外連引入）的方式，
但對於一些內網開發者和微前端應用開發者，仍不太完全滿足需求。

對於內網開發者

對於內網開發者，無法連線外網，使用相對路徑引入的方式，能較好地解決圖示資源在地化的問題。

對於微前端應用開發者

但對於微前端應用開發者（比如說我們），相對路徑引入的方式，仍無法滿足我們解決圖示資源在地化的問題。因為子應用一旦嵌入基座，由於瀏覽器中的 IP 域名就不再是子應用的 IP 域名，若請求未明確指定 IP 域名的情況下，請求會預設取瀏覽器中的 IP 域名（雖然大多是 umi+qiankun，會幫我處理絕大多數請求，讓請求仍指向子應用的靜態資源服務），如圖：

font 的正確路徑應該是：http://子應用IP:子應用埠/fo...，
但由於子應用在基座（即：主應用）中執行，此時使用的是相對路徑，可以發現發出的資源請求 URL 變成了：http://主應用IP:主應用埠/fo...，這明顯不對，報了 404 錯誤。

我的解決方案

說實話，這並不難理解，只是當時一下子沒想到，害我自己還去寫了根據應用名獲取對應應用地址，將其與圖示資原始檔進行路徑拼接的方法。