子应用的iconfont图标在主应用中无法显示

问题描述

在对一个子项目进行微前端兼容的时候，发现一些图标在项目单独跑起来的时候可以正常显示，但是在将项目加入到微前端中作为子项目的时候就无法显示了。排查了一下，发现只要是 iconfont 的图标均不能显示。

造成问题的原因

因为微前端中依赖 shadow-root ，但是 shadow-root 中并没有支持 @font-face，iconfont 中又依赖 @font-face，因此就导致图标无法显示。

解决办法

网上很多人提出了相关的解决办法，具体参考@font-face doesn’t work in Shadow DOM 和 Shadow DOM 在浏览器扩展程序中的应用 以及 @font-face definitions in shadowRoot cannot be used within the shadowRoot ，这几篇文章都提及到一些解决办法。
归纳起来的意思就是将 @font-face 写道 link 中，然后插到 head 标签中，如下所示：

  1. // 将 @font-face 写在宿主网页中
  2. const fontFaceCss = `
  3.   @font-face {
  4.     font-family: 'hcfy-font-icons';
  5.     src: url('data:font/woff2;base64,...') format('woff2');
  6.   }
  7. `
  8. const fontFaceStyle = document.createElement('style')
  9. style.textContent = fontFaceCss
  10. document.head.appendChild(fontFaceStyle)
  12. // 将图标样式写在 Shadow DOM 里
  13. const iconsCss = `
  14.   .icon-help { ... }
  15.   .icon-settings { ... }
  16. `
  17. const style = document.createElement('style')
  18. style.textContent = iconsCss
  19. shadowRoot.appendChild(style)

也许是我尝试的写法还是有点问题，最终这个解决方案还是没有成功。
考虑到 iconfont 与 svg 的对比，svg 碾压 iconfont ，所以还是直接弃用了 iconfont ，使用 svg 代替，也就不会出现在主应用中图标不显示的问题了。