building icon paths

Author: zamoore

packages/components/package.json

@@ -384,6 +384,7 @@
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
+      "./services/hds-carbon.js": "./dist/_app_/services/hds-carbon.js",
       "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
     }

packages/components/src/components/hds/icon/index.hbs

@@ -8,21 +8,24 @@
   ...attributes
   aria-hidden="{{if @title 'false' 'true'}}"
   aria-labelledby={{this.ariaLabelledby}}
-  data-test-icon={{@name}}
+  data-test-icon={{this.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"
+  {{this.loadIconModule name=this.name size=this.size carbonModeEnabled=this.hdsCarbon.carbonModeEnabled}}
 >
+  {{this.iconHtml}}
+
   {{#if @title}}
     <title id={{this._titleId}}>{{@title}}</title>
     <g role="presentation">
-      <use href="#flight-{{@name}}-{{this.size}}"></use>
+      <use href="#{{this.uniqueSymbolId}}"></use>
     </g>
   {{else}}
-    <use href="#flight-{{@name}}-{{this.size}}"></use>
+    <use href="#{{this.uniqueSymbolId}}"></use>
   {{/if}}
 </svg>

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

@@ -4,17 +4,31 @@
  */
 
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
 import { guidFor } from '@ember/object/internals';
 import { assert } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
 import { iconNames } from '@hashicorp/flight-icons/svg';
+import { IconRegistry } from '@hashicorp/flight-icons/js-symbols/registry';
+import { task } from 'ember-concurrency';
+import { modifier } from 'ember-modifier';
 import { HdsIconSizeValues, HdsIconColorValues } from './types.ts';
-import type { HdsIconSizes, HdsIconColors } from './types';
+
+import type { SafeString } from '@ember/template';
 import type { IconName } from '@hashicorp/flight-icons/svg';
-import type Owner from '@ember/owner';
+import type { IconModuleName } from '@hashicorp/flight-icons/js-symbols/registry.ts';
+import type { HdsIconSizes, HdsIconColors } from './types';
+import type HdsCarbonService from '../../../services/hds-carbon.ts';
 
 export const COLORS: HdsIconColors[] = Object.values(HdsIconColorValues);
 export const NAMES = iconNames;
 
+interface IconModule {
+  flight: (symbolId: string) => string;
+  carbon: ((symbolId: string) => string) | null;
+}
+
 export interface HdsIconSignature {
   Args: {
     name: IconName;
@@ -29,19 +43,58 @@ export interface HdsIconSignature {
 }
 
 export default class HdsIcon extends Component<HdsIconSignature> {
+  @service declare readonly hdsCarbon: HdsCarbonService;
+
+  @tracked iconModule: IconModule | null = null;
+
   private _iconId = 'icon-' + guidFor(this);
   private _titleId = 'title-' + guidFor(this);
 
-  constructor(owner: Owner, args: HdsIconSignature['Args']) {
-    super(owner, args);
+  loadIconModule = modifier(
+    (
+      _element: SVGElement,
+
+      _positional: [],
+      {
+        name,
+        size,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        carbonModeEnabled,
+      }: { name: IconName; size: HdsIconSizes; carbonModeEnabled: boolean }
+    ) => {
+      void this.loadIconModuleTask.perform(name, size);
+    }
+  );
+
+  get name(): HdsIconSignature['Args']['name'] {
+    const { name } = this.args;
 
-    if (!this.args.name) {
+    if (name === undefined) {
       assert('Please provide to <Hds::Icon> a value for @name');
-    } else if (!iconNames.includes(this.args.name)) {
-      assert(
-        `The icon @name "${this.args.name}" provided to <Hds::Icon> is not correct. Please verify it exists on https://helios.hashicorp.design/icons/library`
-      );
     }
+
+    return name;
+  }
+
+  get iconHtml(): SafeString | undefined {
+    const module = this.iconModule;
+
+    if (module == null) {
+      return undefined;
+    }
+
+    const generator =
+      this.hdsCarbon.carbonModeEnabled && module.carbon !== null
+        ? module.carbon
+        : module.flight;
+
+    const iconHtml = htmlSafe(generator(this.uniqueSymbolId));
+
+    return iconHtml;
+  }
+
+  get uniqueSymbolId(): string {
+    return `${this._iconId}-symbol`;
   }
 
   get isInline(): boolean {
@@ -66,7 +119,7 @@ export default class HdsIcon extends Component<HdsIconSignature> {
     }
   }
 
-  get size(): string {
+  get size(): HdsIconSizes {
     return this.args.size ?? HdsIconSizeValues.Sixteen;
   }
 
@@ -112,4 +165,19 @@ export default class HdsIcon extends Component<HdsIconSignature> {
 
     return classes.join(' ');
   }
+
+  loadIconModuleTask = task(
+    async (name: IconName, size: HdsIconSizes): Promise<void> => {
+      const iconModuleName: IconModuleName = `${name}-${size}`;
+      const importFn = IconRegistry[iconModuleName];
+
+      if (importFn === undefined) {
+        assert(
+          `The icon @name "${this.args.name}" or @size "${this.args.size}" provided to <Hds::Icon> is not correct. Please verify the icon exists on https://helios.hashicorp.design/icons/library`
+        );
+      } else {
+        this.iconModule = await importFn();
+      }
+    }
+  );
 }

packages/components/src/services/hds-carbon.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class HdsCarbonService extends Service {
+  @tracked carbonModeEnabled: boolean = false;
+
+  toggleCarbonMode() {
+    this.carbonModeEnabled = !this.carbonModeEnabled;
+  }
+}

packages/flight-icons/js-symbols/accessibility-16.js

@@ -1,10 +1,4 @@
-/**
- * Generated Icon: activity-16
- */
 export const flight = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></symbol>`;
-};
-
-export const carbon = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12,29a1,1,0,0,1-.92-.62L6.33,17H2V15H7a1,1,0,0,1,.92.62L12,25.28,20.06,3.65A1,1,0,0,1,21,3a1,1,0,0,1,.93.68L25.72,15H30v2H25a1,1,0,0,1-.95-.68L21,7,12.94,28.35A1,1,0,0,1,12,29Z"/></symbol>`;
+    return `<symbol id="${id}" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" fill-rule="evenodd" d="M6.016 1a.75.75 0 01.698.521l3.306 10.33 1.47-4.341A.75.75 0 0112.2 7H15a.75.75 0 010 1.5h-2.262l-2.028 5.99a.75.75 0 01-1.424-.011L5.952 4.06 4.504 8.008A.75.75 0 013.8 8.5H1A.75.75 0 111 7h2.276l2.02-5.508c.11-.301.4-.499.72-.492z" clip-rule="evenodd"/></g></symbol>`;
 };
+export const carbon = null;

packages/flight-icons/js-symbols/accessibility-24.js

@@ -1,10 +1,4 @@
-/**
- * Generated Icon: activity-24
- */
 export const flight = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></symbol>`;
-};
-
-export const carbon = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12,29a1,1,0,0,1-.92-.62L6.33,17H2V15H7a1,1,0,0,1,.92.62L12,25.28,20.06,3.65A1,1,0,0,1,21,3a1,1,0,0,1,.93.68L25.72,15H30v2H25a1,1,0,0,1-.95-.68L21,7,12.94,28.35A1,1,0,0,1,12,29Z"/></symbol>`;
+    return `<symbol id="${id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" fill-rule="evenodd" d="M9.003 2a.75.75 0 01.71.519l5.278 16.27 2.294-7.265A.75.75 0 0118 11h4a.75.75 0 010 1.5h-3.45l-2.835 8.976a.75.75 0 01-1.428.005L8.99 5.151l-2.278 6.836A.75.75 0 016 12.5H2A.75.75 0 012 11h3.46l2.828-8.487A.75.75 0 019.003 2z" clip-rule="evenodd"/></g></symbol>`;
 };
+export const carbon = null;

packages/flight-icons/js-symbols/activity-16.js

@@ -1,10 +1,4 @@
-/**
- * Generated Icon: alert-circle-24
- */
 export const flight = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></symbol>`;
-};
-
-export const carbon = function (id) {
-    return `<symbol id="${id}" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M15 8H17V19H15zM16 22a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 22z"/></symbol>`;
+    return `<symbol id="${id}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><g fill="currentColor"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zM12 15a1 1 0 100 2h.01a1 1 0 100-2H12z"/><path fill-rule="evenodd" d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm11-9.5a9.5 9.5 0 100 19 9.5 9.5 0 000-19z" clip-rule="evenodd"/></g></g></symbol>`;
 };
+export const carbon = null;