From fa97f33321f261f608e362e9e12b4fd6cf5cb34f Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 20 Sep 2024 10:15:07 +0200
Subject: [PATCH] Preload svg icon sprite

Preloading the svg icon sprite with `crossorigin` allowed should
fix CORS issues.

See https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html

Fixes #2937
---
 app/javascript/alchemy_admin/components/icon.js       | 4 ++--
 app/javascript/alchemy_admin/shoelace_theme.js        | 4 ++--
 app/views/layouts/alchemy/admin.html.erb              | 2 +-
 spec/javascript/alchemy_admin/components/icon.spec.js | 8 ++++----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/javascript/alchemy_admin/components/icon.js b/app/javascript/alchemy_admin/components/icon.js
index f5a45a83ad..5081fcb62a 100644
--- a/app/javascript/alchemy_admin/components/icon.js
+++ b/app/javascript/alchemy_admin/components/icon.js
@@ -6,8 +6,8 @@ class Icon extends HTMLElement {
   constructor() {
     super()
     this.spriteUrl = document
-      .querySelector('meta[name="alchemy-icon-sprite"]')
-      .getAttribute("content")
+      .querySelector('link[rel="preload"][as="image"]')
+      .getAttribute("href")
   }
 
   connectedCallback() {
diff --git a/app/javascript/alchemy_admin/shoelace_theme.js b/app/javascript/alchemy_admin/shoelace_theme.js
index 7f4c934cb1..1de8e661bf 100644
--- a/app/javascript/alchemy_admin/shoelace_theme.js
+++ b/app/javascript/alchemy_admin/shoelace_theme.js
@@ -43,8 +43,8 @@ setDefaultAnimation("dialog.hide", {
 })
 
 const spriteUrl = document
-  .querySelector('meta[name="alchemy-icon-sprite"]')
-  .getAttribute("content")
+  .querySelector('link[rel="preload"][as="image"]')
+  .getAttribute("href")
 
 const iconMap = {
   "x-lg": "close"
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index 2f78e78ee7..9ffa7204fa 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/app/views/layouts/alchemy/admin.html.erb
@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><%= render_alchemy_title %></title>
     <link rel="shortcut icon" href="<%= asset_path('alchemy/favicon.ico') %>">
+    <link rel="preload" href="<%= asset_path("remixicon.symbol.svg") %>" as="image" type="<%= Mime::Type.lookup_by_extension(:svg) %>" crossorigin>
     <%= csrf_meta_tag %>
     <meta name="robots" content="noindex">
-    <meta name="alchemy-icon-sprite" content="<%= asset_path("remixicon.symbol.svg") %>">
     <meta name="turbo-prefetch" content="false">
     <meta name="turbo-cache-control" content="no-cache">
     <%= stylesheet_link_tag('alchemy/admin', media: 'screen', 'data-turbo-track' => true) %>
diff --git a/spec/javascript/alchemy_admin/components/icon.spec.js b/spec/javascript/alchemy_admin/components/icon.spec.js
index 0f563eb115..aad8d4a3eb 100644
--- a/spec/javascript/alchemy_admin/components/icon.spec.js
+++ b/spec/javascript/alchemy_admin/components/icon.spec.js
@@ -4,7 +4,7 @@ import { renderComponent } from "./component.helper"
 describe("alchemy-icon", () => {
   it("renders an icon with default style", () => {
     const html = `
-      <meta name="alchemy-icon-sprite" content="/assets/remixicon.symbol.svg" />
+      <link rel="preload" href="/assets/remixicon.symbol.svg" as="image">
       <alchemy-icon name="image"></alchemy-icon>
     `
     const icon = renderComponent("alchemy-icon", html)
@@ -16,7 +16,7 @@ describe("alchemy-icon", () => {
 
   it("renders an icon with given style", () => {
     const html = `
-      <meta name="alchemy-icon-sprite" content="/assets/remixicon.symbol.svg" />
+      <link rel="preload" href="/assets/remixicon.symbol.svg" as="image">
       <alchemy-icon name="image" icon-style="fill"></alchemy-icon>
     `
     const icon = renderComponent("alchemy-icon", html)
@@ -28,7 +28,7 @@ describe("alchemy-icon", () => {
 
   it("renders an icon with no style", () => {
     const html = `
-      <meta name="alchemy-icon-sprite" content="/assets/remixicon.symbol.svg" />
+      <link rel="preload" href="/assets/remixicon.symbol.svg" as="image">
       <alchemy-icon name="image" icon-style="none"></alchemy-icon>
     `
     const icon = renderComponent("alchemy-icon", html)
@@ -40,7 +40,7 @@ describe("alchemy-icon", () => {
 
   it("renders an icon with size", () => {
     const html = `
-      <meta name="alchemy-icon-sprite" content="/assets/remixicon.symbol.svg" />
+      <link rel="preload" href="/assets/remixicon.symbol.svg" as="image">
       <alchemy-icon name="image" size="medium"></alchemy-icon>
     `
     const icon = renderComponent("alchemy-icon", html)