refactor(icon): retrieve icons through dynamic import

.eslintrc.json

@@ -23,5 +23,5 @@
     "sort-exports/sort-exports": ["error", { "sortDir": "asc" }]
     // "jsx-quotes": [2, "prefer-single"],
   },
-  "ignorePatterns": ["**/*.js", "mocks", "**/*.mjs", "cypress", "cypress.config.ts"]
+  "ignorePatterns": ["**/*.js", "mocks", "**/*.mjs", "cypress", "cypress.config.ts", "**/*/icon-registry.ts"]
 }

cypress/apps/angular-app/tsconfig.json

@@ -16,7 +16,7 @@
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "ES2022",
-    "module": "ES2022",
+    "module": "ESNext",
     "useDefineForClassFields": false,
     "lib": ["ES2022", "dom"]
   },

index.html

@@ -234,6 +234,9 @@ <h2>Icon</h2>
         <sgds-icon name="twitter-x"></sgds-icon>
         <sgds-icon name="youtube"></sgds-icon>
         <sgds-icon name="google"></sgds-icon>
+        <sgds-icon name="dash"></sgds-icon>
+        <sgds-icon name="plus"></sgds-icon>
+        <sgds-icon name="plusdfsdfs"></sgds-icon>
       </div>
       <br />
     </div>
@@ -1006,7 +1009,6 @@ <h2>Form Validation</h2>
           <sgds-icon slot="invalidIcon" size="md" name="placeholder"></sgds-icon>
         </sgds-input>
         <sgds-quantity-toggle name="quant" min="1" max="2" value="4" hinttext="type hello" hasFeedback="both">
-          <sgds-icon slot="invalidIcon" size="md" name="placeholder"></sgds-icon>
         </sgds-quantity-toggle>
         <sgds-checkbox-group hasFeedback hintText="hint for checkbox" label="checkbox">
           <sgds-checkbox name="checkbox" value="checkboxhello" required>she</sgds-checkbox>

rollup.config.mjs

@@ -81,7 +81,8 @@ const buildUMDComponentBundles = () => {
       name: `${meta.name}Bundle`,
       file: `lib/${meta.outputPath}.umd.js`,
       format: "umd",
-      sourcemap: true
+      sourcemap: true,
+      inlineDynamicImports: true
     },
     plugins: wcPlugins
   }));
@@ -112,7 +113,8 @@ const buildSgdsPackage = () => {
         entryFileNames: "[name].umd.js",
         dir: "lib",
         format: "umd",
-        sourcemap: true
+        sourcemap: true,
+        inlineDynamicImports: true
       },
       plugins: wcPlugins
     },

src/components/Dropdown/sgds-dropdown-item.ts

@@ -17,13 +17,13 @@ export class SgdsDropdownItem extends SgdsElement {
 
   @queryAssignedElements({ flatten: true }) anchor: HTMLAnchorElement[];
 
-    /** when true, sets the active stylings of .nav-link */
-    @property({ type: Boolean })
-    active = false;
-  
-    /** Disables the SgdsMainnavItem */
-    @property({ type: Boolean, reflect: true })
-    disabled = false;
+  /** when true, sets the active stylings of .nav-link */
+  @property({ type: Boolean })
+  active = false;
+
+  /** Disables the SgdsMainnavItem */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -33,6 +33,7 @@ export class SgdsDropdownItem extends SgdsElement {
       }
     });
     this.setAttribute("role", "menuitem");
+    this.setAttribute("aria-disabled", `${this.disabled}`);
   }
 
   render() {

src/components/FileUpload/sgds-file-upload.ts

@@ -170,7 +170,7 @@ export class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) {
   }
   render() {
     const getCheckedIcon = () => {
-      return html`<sgds-icon name="check-fill-circle"></sgds-icon>`;
+      return html`<sgds-icon name="check-circle-fill"></sgds-icon>`;
     };
 
     const listItems = this.selectedFiles.map(

src/components/Icon/sgds-icon.ts

@@ -25,26 +25,28 @@ export class SgdsIcon extends SgdsElement {
 
   async firstUpdated() {
     if (this.name) {
-      this.loadSvg(this.name);
+      await this.loadSvg(this.name);
     }
   }
 
   updated() {
     this.style.display = this._svgContent ? "flex" : "none";
   }
 
-  async loadSvg(name: string) {
+  async loadSvg(name: string): Promise<void> {
     if (name) {
       // Dynamically import the SVG if not cached
+      const pascalName = name
+        .split("-")
+        .map(name => String(name).charAt(0).toUpperCase() + String(name).slice(1))
+        .join("");
       try {
-        const iconPath = new URL(`../../icons/${name}.svg`, import.meta.url).href;
-        const response = await fetch(iconPath);
-
-        if (response.ok) {
-          const svgContent = await response.text();
-          // Render the SVG
-          // this.renderSvg(svgContent);
-          this._svgContent = svgContent;
+        const iconRegistry = await import("./icon-registry");
+        const svg = iconRegistry[pascalName];
+        if (svg) {
+          this._svgContent = svg;
+        } else {
+          throw new Error("icon `name` is undefined");
         }
       } catch (error) {
         console.error(`Error loading SVG: ${name}`, error);

src/components/QuantityToggle/sgds-quantity-toggle.ts

@@ -28,8 +28,7 @@ export class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElemen
   /** @internal */
   static dependencies = {
     "sgds-input": SgdsInput,
-    "sgds-icon-button": SgdsIconButton,
-    "sgds-icon": SgdsIcon
+    "sgds-icon-button": SgdsIconButton
   };
   /** @internal */
   @query("sgds-icon-button[ariaLabel^='increase by']") private plusBtn: HTMLButtonElement;
@@ -237,8 +236,8 @@ export class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElemen
             ariaLabel=${`decrease by ${this.step}`}
             ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)}
             @click=${this._onMinus}
+            name="dash"
           >
-            <sgds-icon name="dash"></sgds-icon>
           </sgds-icon-button>
           <sgds-input
             type="number"
@@ -263,7 +262,8 @@ export class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElemen
             ariaLabel=${`increase by ${this.step}`}
             @click=${this._onPlus}
             ?disabled=${this.disabled || (this.max !== undefined && this.max && this.value >= this.max)}
-            ><sgds-icon name="plus"></sgds-icon>
+            name="plus"
+          >
           </sgds-icon-button>
         </div>
         <div id="announcer" role="region" aria-live="assertive" class="visually-hidden">${this.value}</div>

src/components/Tab/sgds-tab-panel.ts

@@ -37,9 +37,9 @@ export class SgdsTabPanel extends SgdsElement {
     return html`
       <slot
         class=${classMap({
-      "tab-panel": true,
-      "tab-panel--active": this.active
-    })}
+          "tab-panel": true,
+          "tab-panel--active": this.active
+        })}
       ></slot>
     `;
   }