fix(components): use base tag href if defined for post-icon (#4217)

swisspost · Jan 22, 2025 · 7394271 · 7394271
1 parent 2b2953b
commit 7394271
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/.changeset/sharp-bobcats-grab.md b/.changeset/sharp-bobcats-grab.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Made `post-icon` component use base tag href to define location of icons folder.
diff --git a/packages/components/src/components/post-icon/post-icon.tsx b/packages/components/src/components/post-icon/post-icon.tsx
@@ -131,7 +131,23 @@ export class PostIcon {
         .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
         ?.getAttribute('data-post-icon-base') ?? null;
 
-    const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\/\/$/, '/');
+    const baseHref = document.getElementsByTagName('base')[0]?.href;
+
+    let calculatedBase: string | null;
+
+    // If this.base or metaBase are relative, prefix them with the baseHref if it exists
+    const absolutePathReg = /^(?:[a-z+]+:)?\/\//i;
+    if (baseHref) {
+      if (this.base && !absolutePathReg.test(this.base)) {
+        calculatedBase = baseHref + this.base;
+      } else if (metaBase && !absolutePathReg.test(metaBase)) {
+        calculatedBase = baseHref + metaBase;
+      }
+    } else {
+      calculatedBase = this.base ?? metaBase;
+    }
+
+    const fileBase = `${calculatedBase ?? baseHref ?? CDN_URL}/`.replace(/\/\/$/, '/');
     const fileName = `${this.name}.svg`;
     const filePath = `${fileBase}${fileName}`;