Ionicons 版本 5 angular

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() {
  }
}

我在 issues 中看到 angular 的 ionic 添加了

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

但我不知道如何继续

Answer 1

Ionicons ver 5 看起来不再像 Ionic 4 那样支持字体图标文件，https://github.com/ionic-team/ionicons/tree/4.x#using-the-font-icon。

Answer 2

您可以轻松破解图标。

我创建了this gist，你可以下载它到你的项目中。

然后在 AppComponent 中导入 NbIonIcons 常量，然后使用 NbIconLibraries 中的星云方法 registerSvgPack 添加它（下面的示例）

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

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

Answer 3

第 1 步：npm 安装 ionicons

第 2 步：在 angular.json

的资产中包含 ionicons

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

第 3 步：在 Index.html

中添加脚本

<body class="mat-typography">
<app-root></app-root>
  <script type="module" src="ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="ionicons.js"></script>
</body>

第 4 步：添加模式：[CUSTOM_ELEMENTS_SCHEMA] in app.module.ts

@NgModule({
declarations: [
    AppComponent
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

如果您在另一个模块中使用 ion-icon 添加架构：[ CUSTOM_ELEMENTS_SCHEMA ] 这样您就不会收到 Web 组件错误。

第 5 步：使用正则像

<ion-icon name="heart"></ion-icon>

Ionicons 版本 5 angular

Ionicons version 5 with angular

ionic-framework

ionicons

angular

nebular