5

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

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

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

但我不知道如何继续

4

3 回答 3

2

您可以轻松破解图标。

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

然后导入NbIonIconsconst ，AppComponent然后使用 Nebular 方法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>

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

于 2020-03-02T22:26:17.833 回答
2

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

于 2020-02-20T12:51:23.260 回答
1

第 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步：使用Regular like

<ion-icon name="heart"></ion-icon>
于 2020-09-17T15:56:00.303 回答