angular - 带 Angular ionic 图标第 5 版

Question

如何将 ionicons 版本 5 添加到 angular，版本 4.5 有一个 scss 可用，我可以以这种方式使用但现在在版本 5 ionicons 使用 svgs 并且不知道如何将它与 angular 集成。

当前方法
在 angular.json 中

"styles": [
              "./node_modules/ionicons/dist/scss/ionicons.scss",
              "src/app/theme/styles/styles.scss"
            ],

然后在我的 app.component.ts (我使用星云 UI)
https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

我在问题中看到，对于带 Angular ionic ，它们会添加

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

但我不知道如何继续

Answer 1

您可以轻松破解图标。

我创建了 this gist ，您可以将其下载到您的项目中。

然后导入 NbIonIcons常量在 AppComponent然后使用星云方法添加它 registerSvgPack来自 NbIconLibraries (下例)

...
import {NbIonIcons} from './icons';
....
export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });

    iconsLibrary.registerSvgPack('ionicons', NbIonIcons);

    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

此时，您可以像往常一样使用图标。

<nb-icon icon="home-outline" pack="ionicons"></nb-icon>

请记住，如果从包中添加/删除图标，您必须更新列表。