带角度的 Ionicons 版本 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 中（我使用的是 nebular 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() {
  }
}

我在问题中看到，对于带有角度的离子，它们添加

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

但我不知道如何继续

Answer 1

您可以轻松破解图标。

我创建了这个要点，您可以将其下载到您的项目中。

然后导入NbIonIconsconst ，然后使用AppComponentNebular 方法添加它（下面的示例）registerSvgPackNbIconLibraries

...
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>

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