Hds::Icon Groundwork (#2198)

Author: zamoore

.changeset/fuzzy-suits-call.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+Loads the `hds-icon` sprite in the `components` package, and ensures it is only loaded once.

packages/components/addon-main.cjs

@@ -4,4 +4,19 @@
  */
 
 const { addonV1Shim } = require('@embroider/addon-shim');
-module.exports = addonV1Shim(__dirname);
+const flightIconSprite = require('@hashicorp/flight-icons/svg-sprite/svg-sprite-module');
+
+module.exports = {
+  ...addonV1Shim(__dirname),
+  contentFor(type, config) {
+    if (
+      !config.emberFlightIcons?.lazyEmbed &&
+      !config.__flightIconsSpriteLoaded &&
+      type === 'body-footer'
+    ) {
+      config.__flightIconsSpriteLoaded = true;
+
+      return flightIconSprite;
+    }
+  },
+};

packages/components/package.json

@@ -40,6 +40,7 @@
     "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.1.0",
     "@hashicorp/ember-flight-icons": "^5.1.2",
+    "@hashicorp/flight-icons": "^3.4.0",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.0",
     "ember-cli-sass": "^11.0.1",

packages/components/src/instance-initializers/load-sprite.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import config from 'ember-get-config';
+import type ApplicationInstance from '@ember/application/instance';
+
+export async function initialize(
+  appInstance: ApplicationInstance & {
+    __flightIconsSpriteLoaded?: boolean;
+  }
+) {
+  if (
+    config?.emberFlightIcons?.lazyEmbed &&
+    // we use this flag to avoid loading the sprite multiple times
+    appInstance.__flightIconsSpriteLoaded !== true
+  ) {
+    const { default: svgSprite } = await import(
+      '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'
+    );
+
+    // in test environments we can inject the sprite directly into the ember testing container
+    // to avoid issues with tools like Percy that only consider content inside that element
+    if (config.environment === 'test') {
+      window.document
+        ?.getElementById('ember-testing')
+        ?.insertAdjacentHTML('afterbegin', svgSprite);
+    } else {
+      window.document?.body?.insertAdjacentHTML('beforeend', svgSprite);
+    }
+
+    // set the flag to avoid loading the sprite multiple times
+    appInstance.__flightIconsSpriteLoaded = true;
+  }
+}
+
+export default {
+  initialize,
+};

packages/ember-flight-icons/addon-main.cjs

@@ -8,7 +8,13 @@ const flightIconSprite = require('@hashicorp/flight-icons/svg-sprite/svg-sprite-
 module.exports = {
   ...addonV1Shim(__dirname),
   contentFor(type, config) {
-    if (!config.emberFlightIcons?.lazyEmbed && type === 'body-footer') {
+    if (
+      !config.emberFlightIcons?.lazyEmbed &&
+      !config.__flightIconsSpriteLoaded &&
+      type === 'body-footer'
+    ) {
+      config.__flightIconsSpriteLoaded = true;
+
       return flightIconSprite;
     }
   },

packages/ember-flight-icons/src/instance-initializers/load-sprite.js

@@ -5,8 +5,12 @@
 
 import config from 'ember-get-config';
 
-export async function initialize() {
-  if (config?.emberFlightIcons?.lazyEmbed) {
+export async function initialize(appInstance) {
+  if (
+    config?.emberFlightIcons?.lazyEmbed &&
+    // we use this flag to avoid loading the sprite multiple times
+    appInstance.__flightIconsSpriteLoaded !== true
+  ) {
     const { default: svgSprite } = await import(
       '@hashicorp/flight-icons/svg-sprite/svg-sprite-module'
     );
@@ -20,6 +24,9 @@ export async function initialize() {
     } else {
       window.document?.body?.insertAdjacentHTML('beforeend', svgSprite);
     }
+
+    // set the flag to avoid loading the sprite multiple times
+    appInstance.__flightIconsSpriteLoaded = true;
   }
 }
 

yarn.lock

@@ -4110,6 +4110,7 @@ __metadata:
     "@glint/template": "npm:^1.4.0"
     "@hashicorp/design-system-tokens": "npm:^2.1.0"
     "@hashicorp/ember-flight-icons": "npm:^5.1.2"
+    "@hashicorp/flight-icons": "npm:^3.4.0"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@tsconfig/ember": "npm:^3.0.8"
     "@types/ember-qunit": "npm:^6.1.1"