Merge pull request #481 from piemonkey/feature/pass-icon-component

[Experimental feature] Add support for using components as icons

Author: Windvis

addon/components/au-accordion.gts

@@ -5,7 +5,7 @@ import { tracked } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
 import AuButton from './au-button';
 import AuContent from './au-content';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 import AuLoader from './au-loader';
 import AuToolbar from './au-toolbar';
 
@@ -16,8 +16,8 @@ const autofocus = modifier(function autofocus(element: HTMLElement) {
 export interface AuAccordionSignature {
   Args: {
     buttonLabel?: string;
-    iconClosed?: string;
-    iconOpen?: string;
+    iconClosed?: AuIconSignature['Args']['icon'];
+    iconOpen?: AuIconSignature['Args']['icon'];
     isOpenInitially?: boolean;
     loading?: boolean;
     reverse?: boolean;

addon/components/au-alert.gts

@@ -2,12 +2,12 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 export interface AuAlertSignature {
   Args: {
     closable?: boolean;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconVisible?: boolean;
     onClose?: () => void;
     size?: 'tiny' | 'small';

addon/components/au-badge.gts

@@ -1,9 +1,9 @@
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 export interface AuBadgeSignature {
   Args: {
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconVisible?: boolean;
     number?: number;
     size?: 'small';

addon/components/au-button.gts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 import { LoadingAnimation } from '../private/components/loading-animation';
 
 const SKINS = [
@@ -15,7 +15,7 @@ export interface AuButtonSignature {
     alert?: boolean;
     disabled?: boolean;
     hideText?: boolean;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
     loading?: boolean;
     loadingMessage?: string;

addon/components/au-card.gts

@@ -6,7 +6,7 @@ import { tracked } from '@glimmer/tracking';
 import AuBadge from './au-badge';
 import AuButton from './au-button';
 import AuContent, { type AuContentSignature } from './au-content';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 export interface AuCardSignature {
   Args: {
@@ -188,7 +188,7 @@ export default class AuCard extends Component<AuCardSignature> {
 
 interface HeaderSignature {
   Args: {
-    badgeIcon?: string;
+    badgeIcon?: AuIconSignature['Args']['icon'];
     badgeNumber?: number;
     badgeSize?: 'small';
     badgeSkin?: 'border' | 'action' | 'brand' | 'success' | 'warning' | 'error';

addon/components/au-icon.gts

@@ -1,15 +1,16 @@
 import { getOwner } from '@ember/owner';
 import Component from '@glimmer/component';
+import { type ComponentLike } from '@glint/template';
 
 export interface AuIconSignature {
   Args: {
     alignment?: 'left' | 'right';
     // TODO: We should deprecate the non-boolean versions since there is no reason to support them
     ariaHidden?: boolean | 'true' | 'false';
-    icon: string;
+    icon: string | ComponentLike<{ Element: Element }>;
     size?: 'large';
   };
-  Element: SVGSVGElement;
+  Element: Element;
 }
 
 export default class AuIcon extends Component<AuIconSignature> {
@@ -39,16 +40,30 @@ export default class AuIcon extends Component<AuIconSignature> {
     }
   }
 
+  get iconComponent() {
+    return typeof this.args.icon !== 'string' && this.args.icon;
+  }
+
   <template>
-    <svg
-      role="img"
-      class="au-c-icon au-c-icon--{{@icon}} {{this.alignment}} {{this.size}}"
-      aria-hidden={{this.ariaHidden}}
-      ...attributes
-    >
-      <use
-        xlink:href="{{this.iconPrefix}}@appuniversum/ember-appuniversum/appuniversum-symbolset.svg#{{@icon}}"
-      ></use>
-    </svg>
+    {{#if this.iconComponent}}
+      {{#let this.iconComponent as |Icon|}}
+        <Icon
+          class="au-c-icon {{this.alignment}} {{this.size}}"
+          aria-hidden={{this.ariaHidden}}
+          ...attributes
+        />
+      {{/let}}
+    {{else}}
+      <svg
+        role="img"
+        class="au-c-icon au-c-icon--{{@icon}} {{this.alignment}} {{this.size}}"
+        aria-hidden={{this.ariaHidden}}
+        ...attributes
+      >
+        <use
+          xlink:href="{{this.iconPrefix}}@appuniversum/ember-appuniversum/appuniversum-symbolset.svg#{{@icon}}"
+        ></use>
+      </svg>
+    {{/if}}
   </template>
 }

addon/components/au-input.gts

@@ -1,11 +1,11 @@
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 export interface AuInputSignature {
   Args: {
     disabled?: boolean;
     error?: boolean;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
     warning?: boolean;
     width?: 'block';

addon/components/au-link-external.gts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 
 const SKIN_CLASSES = {
   primary: 'au-c-link',
@@ -12,7 +12,7 @@ const SKIN_CLASSES = {
 export interface AuLinkExternalSignature {
   Args: {
     hideText?: boolean;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
     skin?:
       | 'primary'

addon/components/au-link.gts

@@ -1,6 +1,6 @@
 import { LinkTo } from '@ember/routing';
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 import linkToModels from '../private/helpers/link-to-models';
 
 const SKIN_CLASSES = {
@@ -22,7 +22,7 @@ export interface AuLinkSignature {
       | 'button-naked';
     width?: 'block';
     query?: Record<string, unknown>;
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     route: string;
     hideText?: boolean;
     model?: unknown;

addon/components/au-pill.gts

@@ -1,14 +1,14 @@
 import { on } from '@ember/modifier';
 import { LinkTo } from '@ember/routing';
 import Component from '@glimmer/component';
-import AuIcon from './au-icon';
+import AuIcon, { type AuIconSignature } from './au-icon';
 import linkToModels from '../private/helpers/link-to-models';
 
 const PILL_SIZES = ['small'];
 
 export interface AuPillSignature {
   Args: {
-    actionIcon?: string;
+    actionIcon?: AuIconSignature['Args']['icon'];
     actionText?: string;
     draft?: boolean;
     href?: string;
@@ -144,7 +144,7 @@ export default class AuPill extends Component<AuPillSignature> {
 
 interface InnerSignature {
   Args: {
-    icon?: string;
+    icon?: AuIconSignature['Args']['icon'];
     iconAlignment?: 'left' | 'right';
     hideText?: boolean;
   };