load sprites if they have not been loaded in another initializer

Author: zamoore

packages/components/addon-main.cjs

@@ -4,4 +4,13 @@
  */
 
 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 && type === 'body-footer') {
+      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.0.3",
+    "@hashicorp/flight-icons": "^3.3.0",
     "@oddbird/popover-polyfill": "^0.4.3",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.0",

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

@@ -0,0 +1,38 @@
+/**
+ * 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 &&
+    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);
+    }
+
+    appInstance.__flightIconsSpriteLoaded = true;
+  }
+}
+
+export default {
+  initialize,
+};

yarn.lock

@@ -4117,6 +4117,7 @@ __metadata:
     "@glint/template": "npm:^1.4.0"
     "@hashicorp/design-system-tokens": "npm:^2.1.0"
     "@hashicorp/ember-flight-icons": "npm:^5.0.3"
+    "@hashicorp/flight-icons": "npm:^3.3.0"
     "@oddbird/popover-polyfill": "npm:^0.4.3"
     "@rollup/plugin-babel": "npm:^6.0.4"
     "@tsconfig/ember": "npm:^3.0.8"