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
AlchemyCMS · Sep 20, 2024 · cbaeaf7 · cbaeaf7
1 parent a7b3624
commit cbaeaf7
Show file tree

Hide file tree

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