fix(icon): ligature based icon are not supported

akveo · Nov 22, 2021 · 53e1cb9 · 53e1cb9
1 parent fca5cd1
commit 53e1cb9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/framework/theme/components/icon/icon-libraries.ts b/src/framework/theme/components/icon/icon-libraries.ts
@@ -29,10 +29,16 @@ function throwWrongPackTypeError(name: string, type: string, desiredType: string
 
 /**
  * This service allows to register multiple icon packs to use them later within `<nb-icon></nb-icon>` component.
+ *
+ * `registerFontPack` supports fonts with ligatures, config should contain ligature flag
+ * ```ts
+ * this.iconLibraries.registerFontPack("material-icons", {
+ *   ligature: true,
+ * });
+ * ```
  */
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class NbIconLibraries {
-
   protected packs: Map<string, NbIconPack> = new Map();
   protected defaultPack: NbIconPack;
 
@@ -42,7 +48,7 @@ export class NbIconLibraries {
    * @param {NbIcon} icons
    * @param {NbIconPackParams} params
    */
-  registerSvgPack(name: string, icons: NbIcons, params: NbIconPackParams= {}) {
+  registerSvgPack(name: string, icons: NbIcons, params: NbIconPackParams = {}) {
     this.packs.set(name, {
       name,
       icons: new Map(Object.entries(icons)),
@@ -127,13 +133,13 @@ export class NbIconLibraries {
       throwWrongPackTypeError(iconsPack.name, iconsPack.type, 'Font');
     }
 
-    const icon = this.getIconFromPack(name, iconsPack);
+    const icon = this.getIconFromPack(name, iconsPack) ?? '';
 
     return {
       name,
       pack: iconsPack.name,
       type: NbIconPackType.FONT,
-      icon: this.createFontIcon(name, icon ? icon : '', iconsPack.params),
+      icon: this.createFontIcon(name, iconsPack.params.ligature ? name : icon, iconsPack.params),
     };
   }
 
@@ -163,7 +169,6 @@ export class NbIconLibraries {
   }
 
   protected getPackOrThrow(name: string): NbIconPack {
-
     const pack: NbIconPack = this.packs.get(name);
     if (!pack) {
       throwPackNotFoundError(name);
@@ -172,7 +177,6 @@ export class NbIconLibraries {
   }
 
   protected getDefaultPackOrThrow(): NbIconPack {
-
     if (!this.defaultPack) {
       throwNoDefaultPackError();
     }

diff --git a/src/framework/theme/components/icon/icons-libraries.spec.ts b/src/framework/theme/components/icon/icons-libraries.spec.ts
@@ -108,6 +108,19 @@ describe('icons-library', () => {
     expect(icon.type).toEqual('font');
   });
 
+  it('should return ligature icon', () => {
+    iconsLibrary.registerFontPack('font-pack', { ligature: true, packClass: 'font', iconClassPrefix: 'fp' });
+    iconsLibrary.setDefaultPack('font-pack');
+
+    const icon = iconsLibrary.getFontIcon('home');
+
+    expect(icon.icon.getContent()).toEqual('home');
+    expect(icon.icon.getClasses()).toEqual(['font', 'fp-home']);
+    expect(icon.name).toEqual('home');
+    expect(icon.pack).toEqual('font-pack');
+    expect(icon.type).toEqual('font');
+  });
+
   it('should return icon', () => {
     iconsLibrary.registerSvgPack('super-pack', { home: '<svg><rect></rect></svg>', gear: '<svg></svg>' });
     iconsLibrary.registerFontPack('font-pack', { packClass: 'font', iconClassPrefix: 'fp' });