Do not use xlink:href in svg icons

We can simply use href. The other is deprecated.
AlchemyCMS · Mar 13, 2024 · 5abc470 · 5abc470
1 parent 86a0be3
commit 5abc470
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>'
     )
   })
 })