Chore: ditch the abandoned ngx-bootstrap-icons, roll our own (#14665)

src-ui/src/app/components/common/bootstrap-icon/bootstrap-icon.component.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core'
+import { icons } from './icons'
+
+/** Converts icon name e.g. `arrow-down-up` to its registry key. */
+const toKey = (name: string) =>
+  name.trim().replace(/-(.)/g, (_, char: string) => char.toUpperCase())
+
+/**
+ * Renders an icon from the official bootstrap-icons package as inline SVG.
+ * Icons must be registered in `./icons.ts`.
+ */
+@Component({
+  selector: 'pngx-bs-icon',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BootstrapIconComponent {
+  private readonly elementRef = inject(ElementRef<HTMLElement>)
+
+  readonly name = input<string>()
+  readonly width = input<string | number>()
+  readonly height = input<string | number>()
+
+  constructor() {
+    effect(() => {
+      const element = this.elementRef.nativeElement
+      element.innerHTML = this.svg()
+      const svg = element.firstElementChild
+      if (!svg) return
+      const width = this.width()
+      const height = this.height()
+      if (width) svg.setAttribute('width', String(width))
+      if (height) svg.setAttribute('height', String(height))
+    })
+  }
+
+  private svg(): string {
+    const name = this.name()
+    if (!name) return ''
+    const svg = icons[toKey(name)]
+    if (!svg) {
+      console.warn(`Icon not found: ${name}`)
+      return ''
+    }
+    return svg
+  }
+}