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 · Oct 4, 2024 · fa97f33 · fa97f33
1 parent 896ff3c
commit fa97f33
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 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) %>

diff --git 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)