fix(icons-plugin): null insert error

apps/icons-plugin/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FeatherIconNames, icons } from 'feather-icons';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
@@ -21,37 +21,42 @@ import { IconSearchComponent } from './components/icon-search/icon-search.compon
         (searchIcons)="this.searchIcons($event)"
       ></app-icon-search>
     </div>
-    @for (key of iconKeys; track key) {
+    @for (key of iconKeys(); track key) {
     <app-icon-button
-      [icon]="icons[key]"
+      [icon]="icons()[key]"
       (insertIcon)="this.insertIcon(key)"
     ></app-icon-button>
     }
   </div>`,
 })
 export class AppComponent {
-  public icons = icons;
-  public iconKeys: FeatherIconNames[] = Object.keys(
-    icons
-  ) as FeatherIconNames[];
+  public icons = signal(icons);
+  public iconKeys = signal(Object.keys(icons) as FeatherIconNames[]);
 
   public insertIcon(key: FeatherIconNames): void {
-    this.sendMessage({ content: icons[key].toSvg(), name: icons[key].name });
+    if (key && this.icons()[key] && this.icons()[key].toSvg()) {
+      this.sendMessage({
+        content: this.icons()[key].toSvg(),
+        name: this.icons()[key].name || key,
+      });
+    }
   }
 
   public searchIcons(search: string): void {
     const allKeys = Object.keys(icons) as FeatherIconNames[];
 
     if (search === '') {
-      this.iconKeys = allKeys;
+      this.iconKeys.set(allKeys);
       return;
     }
 
-    this.iconKeys = allKeys.filter(
+    const filtered = allKeys.filter(
       (key) =>
-        this.icons[key].tags.some((t) => t.match(search)) ||
-        this.icons[key].name.match(search)
+        this.icons()[key].tags.some((t) => t.match(search)) ||
+        this.icons()[key].name.match(search)
     ) as FeatherIconNames[];
+
+    this.iconKeys.set(filtered);
   }
 
   private sendMessage(message: unknown): void {

apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts

@@ -1,17 +1,16 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, output, input } from '@angular/core';
 import { SafeHtmlPipe } from '../../pipes/safe-html.pipe';
 import { FeatherIcon } from 'feather-icons';
 
 @Component({
   selector: 'app-icon-button',
   standalone: true,
-  imports: [CommonModule, SafeHtmlPipe],
+  imports: [SafeHtmlPipe],
   styleUrl: './icon-button.component.css',
   template: `<button
     class="icon-button"
-    [attr.aria-label]="'Insert icon: ' + icon.name"
-    [title]="icon.name"
+    [attr.aria-label]="'Insert icon: ' + icon().name"
+    [title]="icon().name"
     (click)="onInsertIcon()"
     type="button"
   >
@@ -25,16 +24,13 @@ import { FeatherIcon } from 'feather-icons';
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      [innerHtml]="icon.contents | safeHtml"
+      [innerHtml]="icon().contents | safeHtml"
     ></svg>
   </button>`,
 })
 export class IconButtonComponent {
-  @Input({ required: true })
-  public icon!: FeatherIcon;
-
-  @Output()
-  private insertIcon = new EventEmitter<void>();
+  public icon = input.required<FeatherIcon>();
+  public insertIcon = output<void>();
 
   public onInsertIcon(): void {
     this.insertIcon.emit();

apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts

@@ -1,23 +1,20 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, output, signal } from '@angular/core';
 import { icons } from 'feather-icons';
 
 @Component({
   selector: 'app-icon-search',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   styleUrl: './icon-search.component.css',
   template: `<input
     type="search"
-    [placeholder]="'Search ' + iconsCount + ' icons'"
+    [placeholder]="'Search ' + iconsCount() + ' icons'"
     (input)="onSearchIcons($event)"
   />`,
 })
 export class IconSearchComponent {
-  @Output()
-  private searchIcons = new EventEmitter<string>();
-
-  public iconsCount = Object.keys(icons).length;
+  public searchIcons = output<string>();
+  public iconsCount = signal(Object.keys(icons).length);
 
   public onSearchIcons(event: Event): void {
     const target = event.target as HTMLInputElement;

apps/icons-plugin/src/plugin.ts

@@ -4,6 +4,10 @@ penpot.ui.open('Icons plugin', 'http://localhost:4202', {
 });
 
 penpot.ui.onMessage<{ content: string; name: string }>((message) => {
+  if (!message.content || !message.name) {
+    return;
+  }
+
   const svgIcon = message.content;
   const iconName = message.name;
   const icon = penpot.createShapeFromSvg(svgIcon);