Icon: convert component to gts format

.changeset/little-games-design.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+<!-- START components/icon -->
+`Icon` - Converted component to `.gts` format
+<!-- END -->

packages/components/src/components.ts

@@ -223,7 +223,7 @@ export { default as HdsFormToggleField } from './components/hds/form/toggle/fiel
 export { default as HdsFormToggleGroup } from './components/hds/form/toggle/group.ts';
 
 // Icon
-export { default as HdsIcon } from './components/hds/icon/index.ts';
+export { default as HdsIcon } from './components/hds/icon/index.gts';
 export * from './components/hds/icon/types.ts';
 
 // IconTile

packages/components/src/components/hds/icon/index.ts → packages/components/src/components/hds/icon/index.gts

@@ -4,14 +4,15 @@
  */
 
 import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
 import { assert } from '@ember/debug';
+import { guidFor } from '@ember/object/internals';
 import { iconNames } from '@hashicorp/flight-icons/svg';
-import { HdsIconSizeValues, HdsIconColorValues } from './types.ts';
-import type { HdsIconSizes, HdsIconColors } from './types';
 import type { IconName } from '@hashicorp/flight-icons/svg';
 import type Owner from '@ember/owner';
 
+import { HdsIconSizeValues, HdsIconColorValues } from './types.ts';
+import type { HdsIconSizes, HdsIconColors } from './types';
+
 export const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues);
 export const NAMES = iconNames;
 
@@ -44,11 +45,11 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get isInline(): boolean {
+  get isInline() {
     return this.args.isInline ?? false;
   }
 
-  get predefinedColor(): HdsIconColors | undefined {
+  get predefinedColor() {
     const { color } = this.args;
 
     if (color && COLORS.includes(color as HdsIconColors)) {
@@ -58,15 +59,15 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get fillColor(): string {
+  get fillColor() {
     if (this.predefinedColor !== undefined) {
       return 'currentColor';
     } else {
       return this.args.color ?? 'currentColor';
     }
   }
 
-  get size(): string {
+  get size() {
     return this.args.size ?? HdsIconSizeValues.Sixteen;
   }
 
@@ -77,15 +78,15 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     };
   }
 
-  get title(): string | null {
+  get title() {
     return this.args.title ?? null;
   }
 
-  get role(): string | null {
+  get role() {
     return this.args.title ? 'img' : null;
   }
 
-  get ariaLabelledby(): string | null {
+  get ariaLabelledby() {
     return this.args.title ? this._titleId : null;
   }
 
@@ -112,4 +113,30 @@ export default class HdsIcon extends Component<HdsIconSignature> {
 
     return classes.join(' ');
   }
+
+  <template>
+    <svg
+      class={{this.classNames}}
+      ...attributes
+      aria-hidden={{if @title "false" "true"}}
+      aria-labelledby={{this.ariaLabelledby}}
+      data-test-icon={{@name}}
+      fill={{this.fillColor}}
+      id={{this._iconId}}
+      role={{this.role}}
+      width={{this.svgSize.width}}
+      height={{this.svgSize.height}}
+      viewBox="0 0 {{this.size}} {{this.size}}"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {{#if @title}}
+        <title id={{this._titleId}}>{{@title}}</title>
+        <g role="presentation">
+          <use href="#flight-{{@name}}-{{this.size}}" />
+        </g>
+      {{else}}
+        <use href="#flight-{{@name}}-{{this.size}}" />
+      {{/if}}
+    </svg>
+  </template>
 }