如何在Angular中集成Ionicons 5？原4.5版本SCSS方式失效

我来帮你梳理下从Ionicons 4.5字体方案切换到5.x SVG方案的完整步骤，结合Nebular的图标库适配，一步步来：

1. 清理旧的字体相关配置 #

首先把angular.json里styles数组中的./node_modules/ionicons/dist/scss/ionicons.scss移除掉——Ionicons 5已经彻底抛弃了字体依赖，不需要再引入这套SCSS了。

2. 确认Assets配置（你已经做对了这步） #

你添加的Assets配置是正确的，它会把Ionicons的所有SVG文件复制到项目构建后的svg目录下，确保Angular能正常访问这些资源：

"assets": [ 
  { "glob": "**/*", "input": "src/assets", "output": "assets" }, 
  { "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" } 
]

3. 替换Nebular图标注册方式（核心步骤） #

之前你用的registerFontPack是针对字体图标的，现在要换成SVG专用的registerSvgPack，修改app.component.ts的代码：

import { NbIconLibraries } from '@nebular/theme';

export class AppComponent implements OnInit {
  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>) {
    // 注册Ionicons SVG图标包
    iconsLibrary.registerSvgPack('ion', {
      iconResolver: (name: string) => `svg/${name}.svg`,
    });
    // 保留Nebular原生的字体图标包
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    // 可根据需求设置默认图标包，比如改成'ion'或者保持'nebular'
    iconsLibrary.setDefaultPack('nebular');

    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }
  ngOnInit() { }
}

这里的iconResolver是关键，它告诉Nebular去哪里找对应的SVG文件——因为我们在Assets里把Ionicons的SVG输出到了./svg目录，所以路径就是svg/${name}.svg（比如用ion-heart时，会自动加载svg/heart.svg）。

4. 在组件中使用Ionicons SVG图标 #

现在就可以像使用Nebular原生图标一样调用Ionicons了，示例：

<!-- 指定使用ion图标包 -->
<nb-icon icon="heart" pack="ion"></nb-icon>
<!-- 如果把默认包设为'ion'，可以直接写 -->
<nb-icon icon="heart"></nb-icon>

额外小技巧 #

• 自定义SVG样式：直接通过CSS修改nb-icon元素即可，比如调整大小、颜色：

.custom-ion-icon {
  width: 28px;
  height: 28px;
  color: #2563eb;
}

<nb-icon icon="star" pack="ion" class="custom-ion-icon"></nb-icon>

• 确保依赖版本：可以执行npm install ionicons@latest更新到最新稳定版，避免兼容性问题。

内容的提问来源于stack exchange，提问作者anthony willis muñoz