Preload SVG Icon Sprite

app/assets/config/alchemy_manifest.js

@@ -2,6 +2,6 @@
 //= link_tree ../builds/alchemy/
 //= link_tree ../builds/tinymce/
 //= link_tree ../images/alchemy/
-//= link_tree ../../../vendor/assets/fonts/
+//= link_tree ../../../vendor/assets/images/
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js

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() {

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"

app/views/alchemy/admin/partials/_main_navigation_entry.html.erb

@@ -6,10 +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 href="<%= asset_path("remixicon.symbol.svg") %>#ri-<%= navigation["icon"] %>" />
-        </svg>
+        <%= content_tag :"alchemy-icon", nil,
+          name: navigation["icon"],
+          "icon-style": navigation["icon-style"] %>
       <% else %>
         <%= render_icon :table %>
       <% end %>

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) %>

config/alchemy/modules.yml

@@ -7,7 +7,7 @@
     name: Home
     controller: "/alchemy/admin/dashboard"
     action: index
-    icon: home-2-line
+    icon: home-2
 
 - name: pages
   engine_name: alchemy
@@ -16,7 +16,7 @@
     name: "modules.pages"
     controller: "/alchemy/admin/pages"
     action: index
-    icon: pages-line
+    icon: pages
     sub_navigation:
       - name: "modules.pages"
         controller: "/alchemy/admin/pages"
@@ -35,7 +35,7 @@
     name: "modules.menus"
     controller: "/alchemy/admin/nodes"
     action: index
-    icon: menu-2-line
+    icon: menu-2
 
 - name: languages
   engine_name: alchemy
@@ -45,6 +45,7 @@
     controller: "/alchemy/admin/languages"
     action: index
     icon: translate-2
+    icon-style: none
 
 - name: sites
   engine_name: alchemy
@@ -53,7 +54,7 @@
     name: "modules.sites"
     controller: "/alchemy/admin/sites"
     action: index
-    icon: global-line
+    icon: global
 
 - name: tags
   engine_name: alchemy
@@ -62,7 +63,7 @@
     name: "modules.tags"
     controller: "/alchemy/admin/tags"
     action: index
-    icon: price-tag-3-line
+    icon: price-tag-3
 
 - name: archive
   engine_name: alchemy
@@ -71,7 +72,7 @@
     controller: "/alchemy/admin/pictures"
     action: index
     name: "modules.library"
-    icon: archive-drawer-line
+    icon: archive-drawer
     sub_navigation:
       - name: "modules.pictures"
         controller: "/alchemy/admin/pictures"

spec/dummy/config/initializers/alchemy.rb

@@ -10,7 +10,7 @@
       name: "Events",
       controller: "/admin/events",
       action: "index",
-      icon: "calendar-event-line",
+      icon: "calendar-event",
       sub_navigation: [{
         name: "Events",
         controller: "/admin/events",

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)