Ionicons 版本 5 带角度答案

【问题标题】：Ionicons version 5 with angularIonicons 版本 5 带角度
【发布时间】：2020-05-24 17:58:21
【问题描述】：

如何将 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"
              }
            ]

但我不知道如何继续

【问题讨论】：

标签： angular ionic-framework nebular ionicons

【解决方案1】：

您可以轻松破解图标。

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

然后在AppComponent 中导入NbIonIcons const，然后使用来自NbIconLibraries 的Nebular 方法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>

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

【讨论】：

好像应该可以，这周没时间测试。唯一烦人的是离子获取更新时的手动部分。我会尽快批准的。
这是有效的。但是，我无法通过 nb-icon 设置图标样式。有什么想法吗？
也许您可以扩展 nbIcon 服务/指令并使用 useClass 来提供新指令。我在 NbMenu 上做了一个类似的开发，在上面添加了工具提示，但使用了原始的 NbMenuService

【解决方案2】：

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

【讨论】：

我在论坛上搜索了几天，清理缓存，安装 npm，这个解决方案就像一个魅力

【解决方案3】：

第 1 步：npm 安装 ionicons

第 2 步：在 angular.json 的资产中包含离子图标

"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 步：添加架构：app.module.ts 中的 [ CUSTOM_ELEMENTS_SCHEMA ]

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

【讨论】：