From 0db19835d3cd81c7aea72d43789bfbdded2d92c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com>
Date: Tue, 19 Mar 2024 07:02:02 +0100
Subject: [PATCH] Docs: fix StackBlitz icon link examples

---
 site/content/docs/5.3/helpers/icon-link.md | 25 ++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index 1e5cc8b127d3..1ee2aa67226a 100644
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -22,7 +22,9 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
 
 {{< example >}}
 <a class="icon-link" href="#">
-  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">  
+    <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
+  </svg>
   Icon link
 </a>
 {{< /example >}}
@@ -30,7 +32,9 @@ Take a regular `<a>` element, add `.icon-link`, and insert an icon on either the
 {{< example >}}
 <a class="icon-link" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">  
+    <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+  </svg>
 </a>
 {{< /example >}}
 
@@ -41,7 +45,9 @@ Add `.icon-link-hover` to move the icon to the right on hover.
 {{< example >}}
 <a class="icon-link icon-link-hover" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+  </svg>
 </a>
 {{< /example >}}
 
@@ -57,7 +63,10 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
 
 {{< example >}}
 <a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
-  <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+  </svg>
   Icon link
 </a>
 {{< /example >}}
@@ -67,7 +76,9 @@ Customize the color by overriding the `--bs-link-*` CSS variable:
 {{< example >}}
 <a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+  </svg>
 </a>
 {{< /example >}}
 
@@ -84,6 +95,8 @@ Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/
 {{< example >}}
 <a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">
   Icon link
-  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" class="bi" viewBox="0 0 16 16" aria-hidden="true">
+    <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+  </svg>
 </a>
 {{< /example >}}