refactor(nb-icon): return null if icon wasn't found (#2466)

BREAKING CHANGE: `NbIconLibraries.getSvgIcon` and `NbIconLibraries.getIcon` could return null if icon wasn't found and won't throw.
akveo · Jul 31, 2020 · 4af8924 · 4af8924
1 parent 540ee46
commit 4af8924
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/framework/theme/components/icon/icon-libraries.ts b/src/framework/theme/components/icon/icon-libraries.ts
@@ -23,10 +23,6 @@ function throwNoDefaultPackError() {
   throw Error('Default pack is not registered.');
 }
 
-function throwIconNotFoundError(name: string, pack: string) {
-  throw Error(`Icon '${name}' is not registered in pack '${pack}'. Check icon name or consider switching icon pack.`);
-}
-
 function throwWrongPackTypeError(name: string, type: string, desiredType: string) {
   throw Error(`Pack '${name}' is not an '${desiredType}' Pack and its type is '${type}'`);
 }
@@ -96,7 +92,7 @@ export class NbIconLibraries {
    *
    * @returns NbIconDefinition
    */
-  getSvgIcon(name: string, pack?: string): NbIconDefinition {
+  getSvgIcon(name: string, pack?: string): NbIconDefinition | null {
     const iconsPack = pack ? this.getPackOrThrow(pack) : this.getDefaultPackOrThrow();
 
     if (iconsPack.type !== NbIconPackType.SVG) {
@@ -105,6 +101,10 @@ export class NbIconLibraries {
 
     const icon = this.getIconFromPack(name, iconsPack);
 
+    if (!icon) {
+      return null;
+    }
+
     return {
       name,
       pack: iconsPack.name,
@@ -127,7 +127,7 @@ export class NbIconLibraries {
       throwWrongPackTypeError(iconsPack.name, iconsPack.type, 'Font');
     }
 
-    const icon = this.getIconFromPack(name, iconsPack, false);
+    const icon = this.getIconFromPack(name, iconsPack);
 
     return {
       name,
@@ -144,7 +144,7 @@ export class NbIconLibraries {
    *
    * @returns NbIconDefinition
    */
-  getIcon(name: string, pack?: string): NbIconDefinition {
+  getIcon(name: string, pack?: string): NbIconDefinition | null {
     const iconsPack = pack ? this.getPackOrThrow(pack) : this.getDefaultPackOrThrow();
 
     if (iconsPack.type === NbIconPackType.SVG) {
@@ -179,11 +179,11 @@ export class NbIconLibraries {
     return this.defaultPack;
   }
 
-  protected getIconFromPack(name: string, pack: NbIconPack, shouldThrow = true): NbIcon | string {
-    if (shouldThrow && !pack.icons.has(name)) {
-      throwIconNotFoundError(name, pack.name);
+  protected getIconFromPack(name: string, pack: NbIconPack): NbIcon | string | null {
+    if (pack.icons.has(name)) {
+      return pack.icons.get(name);
     }
 
-    return pack.icons.get(name);
+    return null;
   }
 }
diff --git a/src/framework/theme/components/icon/icon.component.ts b/src/framework/theme/components/icon/icon.component.ts
@@ -218,14 +218,21 @@ export class NbIconComponent implements NbIconConfig, OnChanges, OnInit {
   }
 
   ngOnChanges() {
-    if (this.iconDef) {
-      this.iconDef = this.renderIcon(this.icon, this.pack, this.options);
+    const iconDef = this.iconLibrary.getIcon(this.icon, this.pack);
+    if (iconDef) {
+      this.renderIcon(this.icon, this.pack, this.options);
+    } else {
+      this.clearIcon();
     }
   }
 
   renderIcon(name: string, pack?: string, options?: { [name: string]: any }) {
     const iconDefinition = this.iconLibrary.getIcon(name, pack);
 
+    if (!iconDefinition) {
+      return;
+    }
+
     const content = iconDefinition.icon.getContent(options);
     if (content) {
       this.html = this.sanitizer.bypassSecurityTrustHtml(content);
@@ -235,6 +242,11 @@ export class NbIconComponent implements NbIconConfig, OnChanges, OnInit {
     return iconDefinition;
   }
 
+  protected clearIcon(): void {
+    this.html = '';
+    this.assignClasses([]);
+  }
+
   protected assignClasses(classes: string[]) {
     this.prevClasses.forEach((className: string) => {
       this.renderer.removeClass(this.el.nativeElement, className);

diff --git a/src/framework/theme/components/icon/icons-libraries.spec.ts b/src/framework/theme/components/icon/icons-libraries.spec.ts
@@ -68,15 +68,13 @@ describe('icons-library', () => {
     expect(icon.type).toEqual('svg');
   });
 
-  it('should throw for unknown svg icon', () => {
+  it('should return null for unknown svg icon', () => {
 
     iconsLibrary.registerSvgPack('super-pack', { home: '<svg><rect></rect></svg>', gear: '<svg></svg>'  });
     iconsLibrary.setDefaultPack('super-pack');
 
 
-    expect(() => iconsLibrary.getSvgIcon('unknown'))
-      // tslint:disable-next-line:max-line-length
-      .toThrowError(`Icon 'unknown' is not registered in pack 'super-pack'. Check icon name or consider switching icon pack.`);
+    expect(iconsLibrary.getSvgIcon('unknown')).toBeNull();
   });
 
   it('should throw for no default pack', () => {
@@ -94,15 +92,13 @@ describe('icons-library', () => {
       .toThrowError(`Pack 'font-pack' is not an 'SVG' Pack and its type is 'font'`);
   });
 
-  it('should throw for wrong pack', () => {
+  it('should return null for wrong pack', () => {
 
     iconsLibrary.registerSvgPack('super-pack', { home: '<svg><rect></rect></svg>', gear: '<svg></svg>'  });
     iconsLibrary.registerFontPack('font-pack');
     iconsLibrary.setDefaultPack('super-pack');
 
-    expect(() => iconsLibrary.getSvgIcon('unknown'))
-      // tslint:disable-next-line:max-line-length
-      .toThrowError(`Icon 'unknown' is not registered in pack 'super-pack'. Check icon name or consider switching icon pack.`);
+    expect(iconsLibrary.getSvgIcon('unknown')).toBeNull();
   });
 
   it('should throw for wrong pack when setting default', () => {