qiankun子应用Element 图标不展示问题

开启了 strictStyleIsolation: true样式隔离后会导致图标消失
如下:

原因就是字体图标没有被正确加载到
解决办法:
在afterMount生命周期中查找所有的style,如果里面包含字体样式的引入就插入到主应用的head里面,确保加载字体图标文件

async afterMount(app, global) {
          const shadowRoot = document.querySelector(`[data-name="${app.name}"]`)?.shadowRoot

         if (shadowRoot) {
            shadowRoot.querySelectorAll('style').forEach(stl => {
              if (stl.textContent && /\.woff/.test(stl.textContent)) {
                // 使用正则匹配所有的 @font-face 规则
                const fontFaceMatches = [...stl.textContent.matchAll(/@font-face\s*\{([^}]+)\}/g)]

                fontFaceMatches.forEach(fontFaceMatch => {
                  // 提取每个 @font-face 规则中的 font-family 属性
                  const fontFamilyMatch = fontFaceMatch[0].match(/font-family:(.*?);/)

                  if (fontFamilyMatch && fontFamilyMatch[1]) {
                    const fontFamily = fontFamilyMatch[1].replace(/['"\s]/g, '')
                    const styleContent = fontFaceMatch[0].replace(/(\.\.\/)+/g, entry) // 替换入口路径,

                    // 检查 head 中是否已存在该 font-family 的 @font-face 样式
                    const existingStyle = document.head.querySelector(`style[data-font-family="${fontFamily}"]`)
                    if (!existingStyle) {
                      // 如果没有找到重复的样式，则插入新的样式
                      const st = document.createElement('style')
                      st.innerHTML = styleContent
                      st.setAttribute('data-font-family', fontFamily) // 为 style 元素添加自定义属性
                      document.head.appendChild(st)
                    }
                  }
                })
              }
            })
          }
}