fix(brand-icon): only warns when icon is not registered

Legal-and-General · Nov 11, 2024 · 1602bab · 1602bab
1 parent 9d913d5
commit 1602bab
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/projects/canopy/src/lib/brand-icon/brand-icon.component.spec.ts b/projects/canopy/src/lib/brand-icon/brand-icon.component.spec.ts
@@ -66,6 +66,12 @@ describe('LgBrandIconComponent', () => {
       expect(pathEl.getAttribute('id')).not.toContain('lg-icon-fill-primary');
       expect(pathEl.getAttribute('data-colour')).toContain('lg-icon-fill-primary');
     });
+
+    it('should not throw an error when an icon is not registered', () => {
+      expect(() => {
+        component.name = 'sun';
+      }).not.toThrow();
+    });
   });
 
   describe('the colour input', () => {

diff --git a/projects/canopy/src/lib/brand-icon/brand-icon.component.ts b/projects/canopy/src/lib/brand-icon/brand-icon.component.ts
@@ -88,8 +88,10 @@ export class LgBrandIconComponent {
 
     const svgData = this.setSVGAttributes(this.iconRegistry.getBrandIcon(name));
 
-    this.svgElement = this.svgElementFromString(svgData);
-    this.hostElement.nativeElement.appendChild(this.svgElement);
+    if (svgData) {
+      this.svgElement = this.svgElementFromString(svgData);
+      this.hostElement.nativeElement.appendChild(this.svgElement);
+    }
   }
 
   constructor(
@@ -115,9 +117,12 @@ export class LgBrandIconComponent {
     let xlinkCount = 0;
 
     return (
+      // Changes the lg-icon-fill-primary id to be a data attribute to avoid issues with duplicated ids.
       svgData
-        // Changes the lg-icon-fill-primary id to be a data attribute to avoid issues with duplicated ids.
-        .replace(/id="lg-icon-fill-primary"/g, () => 'data-colour="lg-icon-fill-primary"')
+        ?.replace(
+          /id="lg-icon-fill-primary"/g,
+          () => 'data-colour="lg-icon-fill-primary"',
+        )
         .replace(/id="Half-tone"/g, () => 'data-colour="lg-icon-half-tone-fill"')
         .replace(/id="Outlines"/g, () => 'data-colour="lg-icon-outlines-fill"')
         .replace(/id="([^"]+)"/g, () => `id="lg-brand-icon-${this.id}-${idCount++}"`)