使用 Angular/Nebular 项目中本地资产的图标作为 nb-action

Question

我想在我的 Angular/Nebular 项目中使用自定义图标作为 nb-action 按钮

我要

我想在我的 Angular/Nebular 项目中使用自定义图标，如下所示：

<nb-actions>
    <!-- works -->
    <nb-action link="/Home" icon="home-outline"></nb-action>
    <!-- does not work but i want it to -->
    <nb-action link="/MyPage" svgIcon="myIcon" pack="custom"></nb-action>
</nb-actions>

如文档中所述
https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-icon-pack
我将此代码添加到我的项目中：

// myComponent.component.ts 
constructor(private nbIconLib: NbIconLibraries){
    this.nbIconLib.registerSvgPack("custom",
        {"myIcon":"./assets/icons/myIcon.svg"}
    )}

 // myComponent.module.ts
imports: [
    ...
    NbIconModule
]

期望的行为：

显示带有我的 costom svg 图标的按钮

我需要 nbIconLibrary.register-方法起作用或使下面的图像解决方案可点击

实际行为：

nb-action 占用 space，不显示图标且不可点击

我试过了：

Angular 材料的不同方法

<nb-actions>
    <nb-action link="/Home" title="Home">
        <mat-icon svgIcon="myIcon"></mat-icon>
    </nb-action>
</nb-actions>

直接显示图片

<nb-actions>
    <nb-action link="/Home" title="Home">
        <img src='./assets/icons/myIcon.svg' width="24px"/>
    </nb-action>
</nb-actions>

两者都显示图标，但在每种情况下都不可点击

使用 nbIconLib 注册图标的不同方式，如下所示： https://github.com/akveo/nebular/issues/2245

this.nbIconLib.registerSvgPack("custom", 
    {"myIcon": "<img src='./assets/icons/myIcon.svg' width='25px'/>"}
)

这不会改变行为

相关依赖项

    "@angular/animations": "~13.3.0",
    "@angular/cdk": "^13.3.1",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/material": "^13.3.1",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@nebular/eva-icons": "^9.0.1",
    "@nebular/theme": "^9.0.1"

Answer 1

通过将我的图标添加到 nebular 中可用的预先存在和预配置的图标包中，我获得了所需的行为。这是我的代码：

this.nbIconLib.getPack("eva").icons.set(
  "myIcon", "<img src='./assets/icons/myIcon.svg' width='25px'/>"
)

我仍然不知道为什么文档中的方法不起作用。

使用 Angular/Nebular 项目中本地资产​​的图标作为 nb-action

Use icon from local assets in Angular/Nebular project as nb-action

angular

svg

nebular

我要

期望的行为：

实际行为：

我试过了：

相关依赖项

使用 Angular/Nebular 项目中本地资产的图标作为 nb-action