From 7394271e5eafffeffce20f99841201ebb34d19bf Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Wed, 22 Jan 2025 14:20:31 +0100
Subject: [PATCH] fix(components): use base tag href if defined for post-icon
 (#4217)

---
 .changeset/sharp-bobcats-grab.md               |  5 +++++
 .../src/components/post-icon/post-icon.tsx     | 18 +++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sharp-bobcats-grab.md

diff --git a/.changeset/sharp-bobcats-grab.md b/.changeset/sharp-bobcats-grab.md
new file mode 100644
index 0000000000..a548d4aa52
--- /dev/null
+++ 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
index 6a48db0aba..43f48cdf1d 100644
--- 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}`;