diff --git a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js index d2209d537a6..6041bc7272f 100644 --- a/app/assets/javascripts/discourse-common/addon/lib/icon-library.js +++ b/app/assets/javascripts/discourse-common/addon/lib/icon-library.js @@ -1,7 +1,7 @@ import I18n from "I18n"; import { h } from "virtual-dom"; import attributeHook from "discourse-common/lib/attribute-hook"; -import { isDevelopment } from "discourse-common/config/environment"; +import Session from "discourse/models/session"; const SVG_NAMESPACE = "http://www.w3.org/2000/svg"; let _renderers = []; @@ -111,14 +111,11 @@ function iconClasses(icon, params) { } function warnIfMissing(id) { - if ( - typeof Discourse !== "undefined" && - isDevelopment() && - warnMissingIcons && - Discourse.SvgIconList && - Discourse.SvgIconList.indexOf(id) === -1 - ) { - console.warn(`The icon "${id}" is missing from the SVG subset.`); // eslint-disable-line no-console + if (warnMissingIcons) { + let iconList = Session.currentProp("svgIconList"); + if (iconList.indexOf(id) === -1) { + console.warn(`The icon "${id}" is missing from the SVG subset.`); // eslint-disable-line no-console + } } } 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 74136b934a1..d08ebd2304c 100644 --- a/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js +++ b/app/assets/javascripts/discourse/app/lib/svg-sprite-loader.js @@ -1,21 +1,25 @@ import loadScript from "discourse/lib/load-script"; -export default { - name: "svg-sprite-loader", - load(spritePath, spriteName) { - const c = "svg-sprites"; - const $cEl = `#${c}`; - const $spriteEl = `${$cEl} .${spriteName}`; +const SVG_CONTAINER_ID = "svg-sprites"; - if ($($cEl).length === 0) $("body").append(`
`); - - if ($($spriteEl).length === 0) - $($cEl).append(`
`); - - loadScript(spritePath).then(() => { - $($spriteEl).html(window.__svg_sprite); - // we got to clean up here... this is one giant string - delete window.__svg_sprite; - }); +export function loadSprites(spritePath, spriteName) { + let spriteContainer = document.getElementById(SVG_CONTAINER_ID); + if (!spriteContainer) { + spriteContainer = document.createElement("div"); + spriteContainer.id = SVG_CONTAINER_ID; + document.body.appendChild(spriteContainer); } -}; + + let sprites = spriteContainer.querySelector(`.${spriteName}`); + if (!sprites) { + sprites = document.createElement("div"); + sprites.className = spriteName; + spriteContainer.appendChild(sprites); + } + + loadScript(spritePath).then(() => { + sprites.innerHTML = window.__svg_sprite; + // we got to clean up here... this is one giant string + delete window.__svg_sprite; + }); +} diff --git a/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js b/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js index 840c75d28ec..4e44e13b67a 100644 --- a/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js +++ b/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js @@ -5,7 +5,8 @@ import RSVP from "rsvp"; import { setEnvironment, isTesting, - isProduction + isProduction, + isDevelopment } from "discourse-common/config/environment"; import { setupURL, setupS3CDN } from "discourse-common/lib/get-url"; import deprecated from "discourse-common/lib/deprecated"; @@ -82,10 +83,10 @@ export default { } app.HighlightJSPath = setupData.highlightJsPath; - app.SvgSpritePath = setupData.svgSpritePath; + Session.currentProp("svgSpritePath", setupData.svgSpritePath); - if (app.Environment === "development") { - app.SvgIconList = setupData.svgIconList; + if (isDevelopment()) { + Session.currentProp("svgIconList", setupData.svgIconList); } if (setupData.s3BaseUrl) { diff --git a/app/assets/javascripts/discourse/app/pre-initializers/svg-sprite-fontawesome.js b/app/assets/javascripts/discourse/app/pre-initializers/svg-sprite-fontawesome.js index 7a5924423c9..72aff84c020 100644 --- a/app/assets/javascripts/discourse/app/pre-initializers/svg-sprite-fontawesome.js +++ b/app/assets/javascripts/discourse/app/pre-initializers/svg-sprite-fontawesome.js @@ -1,11 +1,12 @@ -import svgSpriteLoader from "discourse/lib/svg-sprite-loader"; +import { loadSprites } from "discourse/lib/svg-sprite-loader"; export default { name: "svg-sprite-fontawesome", - initialize() { - if (Discourse && Discourse.SvgSpritePath) { - svgSpriteLoader.load(Discourse.SvgSpritePath, "fontawesome"); + initialize(container) { + let session = container.lookup("session:main"); + if (session.svgSpritePath) { + loadSprites(session.svgSpritePath, "fontawesome"); } } };