在微前端中,antd icon createFormIconfontCN 的本地化问题

blueju 等级 378 0 0

首发于 语雀文档

前言

用过 antd icon 的朋友们可能知道,对于 createFormIconfontCN,其中介绍的用法是:

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

使用的是外链的方式

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

对于内网开发者

对于内网开发者,无法连接外网,因此也就无法使用外链。
而如果我们使用 public 静态化的方式,能较好地解决图标资源本地化的问题。
我一开始也是使用此方法。

第一步:将需要的字体脚本放入 public 目录下 第二步:在 createFromIconfontCN 的 scriptUrl 中写入字体脚本的相对路径字符串

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

对于微前端应用开发者

但对于微前端应用开发者(比如说我们), public 静态化的方式,仍无法满足我们解决图标资源本地化的问题。因为子应用一旦嵌入基座,由于浏览器中的 IP 域名就不再是子应用的 IP 域名,若请求未明确指定 IP 域名的情况下,请求会默认取浏览器中的 IP 域名(虽然大多是 umi+qiankun,会帮我处理绝大多数请求,让请求仍指向子应用的静态资源服务),如图:
在微前端中,antd icon createFormIconfontCN 的本地化问题

font 的正确路径应该是:http://子应用IP:子应用端口/font.js, 但由于子应用在基座(即:主应用)中运行,此时使用的是相对路径,可以发现发出的资源请求 URL 变成了:http://主应用IP:主应用端口/font.js,这明显不对,报了 404 错误。

我的解决方案

说实话,这并不难理解,只是当时一下子没想到,害我自己还去写了根据应用名获取对应应用地址,将其与图标资源文件进行路径拼接的逻辑方法。😂😂😂

我在网上搜了不少,只找到官方的外链方式,和 public 静态化的方式来解决图标资源本地化,但没看到有如下的解决方式。
在我看来,在没有更多时间去研究 umi 配置的情况下去解决图标资源本地化,这是最快的解决方案。

iconfont 的字体脚本本质还是 js 脚本,那便可以直接 require

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


当然,还有一种办法,那就是:内网 / 外网的 CDN / OSS

收藏
评论区

相关推荐

WorkManager 在 Kotlin 中的实践
WorkManager 是一个 Android Jetpack 扩展库,它可以让您轻松规划那些可延后、异步但又需要可靠运行的任务。对于绝大部分后台执行任务来说,使用 WorkManager 是目前 Android 平台上的最佳实践。 WorkManager https://developer.android.google.cn/topic/libra
JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
【Typora】Typora 完全使用详解
<font color"FF0000"Matrix 精选</font Matrix(https://sspai.com/matrix) 是少数派的写作社区
13. 如果自己写的 Python 程序出错了,怎么办?
本篇文章主要内容为程序错误与异常处理,顺带会说一下内置模块 logging 。 <center<font colorred缓解一下视疲劳</font</center 13. 如果自己写的 Python 程序出错了,怎么办?(https://imghelloworld.osscnbeijing.aliyuncs.com/ee1f42d25d
15. Python 程序运行速度如何提高十倍?第一遍滚雪球学 Python 收工
本篇文章将给大家介绍 Python 多线程与多进程相关知识,学习完该知识点之后,你的 Python 程序将进入另一个高峰。 <center<font colorred缓解一下视疲劳</font</center 15. Python 程序运行速度如何提高十倍?第一遍滚雪球学 Python 收工(https://imghelloworld.oss
搭建 umi + qiankun + antd 的微前端平台
<a name"f5444d4a"</a 关键词: umi qiankun ant design pro 非动态注册子应用 非动态装载子应用(路由)<a name"Lxdp4"</a 背景银行项目,需要一个前端中台,承载各项目组开发的应用,本篇文章是在工作实践后所写,还是具有一定可借鉴性的,至于官网已经有相关内容还专门写这么一篇,还
Steam Apex Legends 领取方法
博主是个热爱 Apex 的玩家,Origin Steam 上已经有 1000 小时左右的游戏时长了。游戏场次...超过 5000 ;)Apex 上了 Steam 平台,所以不少玩家已经卸载了“烂橘子”。当然,我也是。不过 Steam 上锁了国区,如果我们直接访问 最终会得到<font color"orange"“您所在的地区目前不提供此物品
在微前端中,antd icon createFormIconfontCN 的本地化问题
首发于 <a name"tCbT2"</a 前言用过 antd icon 的朋友们可能知道,对于 createFormIconfontCN,其中介绍的用法是: 使用的是外链的方式javascriptimport { createFromIconfontCN } from '@antdesign/icons';const IconFon
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
eclipse安装教程(2021最新版)超级易懂到吐血
<font color red第一步:下载JDK(下载地址)<font color red第二步 根据自己电脑的系统,选择相应的版本x64代表64位,x86代表32位。点击相应的JDK进行下载<font color blue点击之后会出现一个对话框<font color blue同意之后下载。(记住下载到哪,打开之后一路同意安装即可)记住你把JDK安
redis在微服务领域的贡献
本文已收录 https://github.com/lkxiaolou/lkxiaolou 欢迎star。 前言说到redis,可能大家的脑海中蹦出的关键词是:NoSQL、KV、高性能、缓存等。但今天的文章从另一个角度——微服务来展开。这篇文章的起因也是源自一次面试经历,在面试一位来自陌陌的候选人(就是那个交友的陌陌)时,他提到一点让我觉得很有意思,他说red
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<font color 00FF7F size5 face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<font color 00FF00 size5 face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界: 1. Javase练气筑基 2. 数据库结丹 3. web前端元婴 4. Jav
服务器项目部署总结(超详细)
系列文章目录<font colorblack face"微软雅黑" size3 本篇文章主要从准备篇、项目开发、项目打包、项目部署四个部分去介绍如何把前后端分离的项目部署到阿里云服务器,在服务器上去玩自己的项目。项目最终效果图:输入ip即可访问!!!<hr style" border:solid; width:100px; height:1px;" col
Ory Kratos 用户认证
为用户认证与管理系统。本文将动手实现浏览器(React+AntD)的完整流程,实际了解下它的 API 。 代码: https://github.com/ikuokuo/startorykratos 了解 Kratos 获取代码bashgit clone b v0.7.0alpha.1 depth 1 https://github.com/ory/kratos