From 5abc470e4f0b1d8e866b23aadcd163ab9b2d3996 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Wed, 13 Mar 2024 09:58:18 +0100
Subject: [PATCH] Do not use xlink:href in svg icons

We can simply use href. The other is deprecated.
---
 app/javascript/alchemy_admin/components/icon.js           | 2 +-
 .../admin/partials/_main_navigation_entry.html.erb        | 3 ++-
 spec/javascript/alchemy_admin/components/icon.spec.js     | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/icon.js b/app/javascript/alchemy_admin/components/icon.js
index 10b26b837c..f5a45a83ad 100644
--- a/app/javascript/alchemy_admin/components/icon.js
+++ b/app/javascript/alchemy_admin/components/icon.js
@@ -20,7 +20,7 @@ class Icon extends HTMLElement {
 
   render() {
     const sizeClass = this.size ? ` icon--${this.size}` : ""
-    this.innerHTML = `<svg class="icon${sizeClass}"><use xlink:href="${this.spriteUrl}#ri-${this.iconName}${this.style}" /></svg>`
+    this.innerHTML = `<svg class="icon${sizeClass}"><use href="${this.spriteUrl}#ri-${this.iconName}${this.style}" /></svg>`
   }
 
   set name(value) {
diff --git a/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb b/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb
index c368824e3e..621fbbbce1 100644
--- a/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb
+++ b/app/views/alchemy/admin/partials/_main_navigation_entry.html.erb
@@ -6,8 +6,9 @@
       <% elsif navigation["inline_image"] %>
         <%== navigation["inline_image"] %>
       <% elsif navigation["icon"] %>
+        <%# Cannot use the render_icon helper, because the navigation["icon"] includes the style %>
         <svg class="icon">
-          <use xlink:href="<%= asset_path("remixicon.symbol.svg") %>#ri-<%= navigation["icon"] %>" />
+          <use href="<%= asset_path("remixicon.symbol.svg") %>#ri-<%= navigation["icon"] %>" />
         </svg>
       <% else %>
         <%= render_icon :table %>
diff --git a/spec/javascript/alchemy_admin/components/icon.spec.js b/spec/javascript/alchemy_admin/components/icon.spec.js
index 193d50dba6..0f563eb115 100644
--- a/spec/javascript/alchemy_admin/components/icon.spec.js
+++ b/spec/javascript/alchemy_admin/components/icon.spec.js
@@ -10,7 +10,7 @@ describe("alchemy-icon", () => {
     const icon = renderComponent("alchemy-icon", html)
 
     expect(icon.innerHTML).toEqual(
-      '<svg class="icon"><use xlink:href="/assets/remixicon.symbol.svg#ri-image-line"></use></svg>'
+      '<svg class="icon"><use href="/assets/remixicon.symbol.svg#ri-image-line"></use></svg>'
     )
   })
 
@@ -22,7 +22,7 @@ describe("alchemy-icon", () => {
     const icon = renderComponent("alchemy-icon", html)
 
     expect(icon.innerHTML).toEqual(
-      '<svg class="icon"><use xlink:href="/assets/remixicon.symbol.svg#ri-image-fill"></use></svg>'
+      '<svg class="icon"><use href="/assets/remixicon.symbol.svg#ri-image-fill"></use></svg>'
     )
   })
 
@@ -34,7 +34,7 @@ describe("alchemy-icon", () => {
     const icon = renderComponent("alchemy-icon", html)
 
     expect(icon.innerHTML).toEqual(
-      '<svg class="icon"><use xlink:href="/assets/remixicon.symbol.svg#ri-image"></use></svg>'
+      '<svg class="icon"><use href="/assets/remixicon.symbol.svg#ri-image"></use></svg>'
     )
   })
 
@@ -46,7 +46,7 @@ describe("alchemy-icon", () => {
     const icon = renderComponent("alchemy-icon", html)
 
     expect(icon.innerHTML).toEqual(
-      '<svg class="icon icon--medium"><use xlink:href="/assets/remixicon.symbol.svg#ri-image-line"></use></svg>'
+      '<svg class="icon icon--medium"><use href="/assets/remixicon.symbol.svg#ri-image-line"></use></svg>'
     )
   })
 })