我想在我的 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-Method 作業或使下面的影像解決方案可點擊
實際行為：
nb-action 占用空間，不顯示圖示且不可點擊
我試過了：
- 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"
uj5u.com熱心網友回復：
通過將我的圖示添加到 nebular 中可用的預先存在和預配置的圖示包，我得到了所需的行為。這是我的代碼：
this.nbIconLib.getPack("eva").icons.set(
"myIcon", "<img src='./assets/icons/myIcon.svg' width='25px'/>"
)
我仍然不知道為什么檔案中的方法不起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/455851.html