From 93b8811f087f8fe2e5aa64eb6ab6f68b8b327bab Mon Sep 17 00:00:00 2001
From: Joe <33972521+hnb-ku@users.noreply.github.com>
Date: Mon, 20 Jun 2022 20:58:50 +0800
Subject: [PATCH] DEV: Moves SVG sprite to `<discourse-assets>` element
 (#17148)

Similar to #17145

This commit moves the SVG sprite container to the <discourse-assets> element.

There is 0 visual or functional changes in this PR. It just tidies up the element view in devTools.
---
 app/assets/javascripts/discourse/app/index.html               | 1 +
 app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js | 3 ++-
 app/views/layouts/application.html.erb                        | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/index.html b/app/assets/javascripts/discourse/app/index.html
index 96b9f9baee4..ad51651ba85 100644
--- a/app/assets/javascripts/discourse/app/index.html
+++ b/app/assets/javascripts/discourse/app/index.html
@@ -28,6 +28,7 @@
       <discourse-assets-json>
         <bootstrap-content key="preloaded">
       </discourse-assets-json>
+      <discourse-assets-icons></discourse-assets-icons>
     </discourse-assets>
 
     <bootstrap-content key="body">
diff --git a/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js b/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
index d08ebd2304c..42f033c413e 100644
--- a/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
+++ b/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js
@@ -7,7 +7,8 @@ export function loadSprites(spritePath, spriteName) {
   if (!spriteContainer) {
     spriteContainer = document.createElement("div");
     spriteContainer.id = SVG_CONTAINER_ID;
-    document.body.appendChild(spriteContainer);
+    const spriteWrapper = document.querySelector("discourse-assets-icons");
+    spriteWrapper?.appendChild(spriteContainer);
   }
 
   let sprites = spriteContainer.querySelector(`.${spriteName}`);
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 52c5302136a..2449c821fe8 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -78,6 +78,7 @@
       <discourse-assets-json>
         <div class="hidden" id="data-preloaded" data-preloaded="<%= preloaded_json %>"></div>
       </discourse-assets-json>
+      <discourse-assets-icons></discourse-assets-icons>
     </discourse-assets>
 
     <%- if allow_plugins? %>