Angular 12项目中Prime Icons在火狐浏览器无法加载显示问题求助

问题原因 #

你遇到的火狐浏览器PrimeIcons加载报错问题，根源在当前Webpack配置的svg资源处理规则和PrimeIcons的字体资源存在冲突：
你配置了全局匹配所有.svg文件使用asset/source类型处理，会误处理PrimeIcons依赖的svg格式字体文件，导致字体文件结构被破坏，火狐的字体安全校验机制识别到文件异常，直接拒绝加载，抛出对应错误。

解决方案 #

1. 调整Webpack的svg处理规则，排除PrimeIcons目录的svg文件，修改后的配置如下：

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default

module.exports = (angularWebpackConfig, options) => {
  const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);

  singleSpaWebpackConfig.module.rules.push(
    {
      test: /\.(png|jpg|jpeg|gif)$/i,
      type: 'asset/inline',
    },
    {
      test: /\.(svg)$/i,
      type: 'asset/source',
      // 新增排除规则，不对primeicons的svg字体做处理
      exclude: /node_modules\/primeicons/
    }
  );

  singleSpaWebpackConfig.externals = [
    /^@example\/*/,
    /^single-spa$/,

    /^rxjs$/,
    /^rxjs\/operators$/,
    
    /^zone\.js$/,

    /^i18next$/,
  ];
  
  return singleSpaWebpackConfig
}

2. 确认angular.json的build配置中styles数组已正确引入PrimeIcons样式：
   "node_modules/primeicons/primeicons.css"
3. 可选兼容验证：PrimeNG 12.2.2官方适配的PrimeIcons版本为4.x系列，你当前使用的5.0.0版本跨度过大也可能引发兼容问题，若调整配置后仍未生效可尝试降级PrimeIcons版本，执行命令：
   npm i primeicons@4.1.0

内容的提问来源于stack exchange，提问作者Alba