Properly render theme icon when using a studio layer as theme

src/UI/BigComponents/ThemeButton.svelte

@@ -8,6 +8,7 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource"
+  import Marker from "../Map/Marker.svelte"
 
   export let theme: LayoutInformation
   export let isCustom: boolean = false
@@ -86,7 +87,8 @@
 
 {#if theme.id !== personal.id || $unlockedPersonal}
   <a class={"flex w-full items-center text-ellipsis rounded my-2"} href={$href}>
-    <img src={theme.icon} class="m-1 block h-11 w-11 sm:mr-2" alt="" />
+    <Marker icons={theme.icon} size="m-1 block h-11 w-11 sm:mr-2"/>
+
     <span class="flex flex-col overflow-hidden text-ellipsis font-bold text-xl">
       <Tr cls="underline" t={title} />
       <Tr cls="subtle text-base" t={description}/>

src/UI/Map/Marker.svelte

@@ -5,11 +5,30 @@
   /**
    * Renders a 'marker', which consists of multiple 'icons'
    */
-  export let icons: { icon: string; color: string }[]
+  export let icons: string | { icon: string; color: string }[]
+
+  if(typeof icons === "string") {
+    icons = icons.split(";").map(subspec => {
+      if(subspec.startsWith("http://") || subspec.startsWith("https://")){
+        return {
+          icon: subspec, color: "black"
+        }
+      }
+      const [icon, color] = subspec.split(":")
+      return {
+        icon, color: color ?? "black"
+      }
+    })
+  }
+
   /**
    * Class which is applied onto the individual icons
    */
   export let clss = ""
+
+  /**
+   * Class applied onto the entire element
+   */
   export let size = "w-full h-full"
 </script>
 

src/UI/Popup/TagRendering/TagRenderingMapping.svelte

@@ -31,20 +31,13 @@
       | "large-height"
       | string
   }
-  function iconToMarker(spec: string) {
-    return spec.split(";").map(subspec => {
-      const [icon, color] = subspec.split(":")
-      return {
-        icon, color: color ?? "black"
-      }
-    })
-  }
+
 </script>
 
 {#if mapping.icon !== undefined}
   <div class="inline-flex items-center">
     <Marker
-      icons={iconToMarker(mapping.icon)}
+      icons={mapping.icon}
       size={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${mapping.iconClass ?? "small"}-width`, "mr-2", "shrink-0 mx-2")}
       clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
     />

src/UI/ThemeViewGUI.svelte

@@ -78,6 +78,7 @@
   import Share from "@babeard/svelte-heroicons/solid/Share"
   import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
   import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
+  import Marker from "./Map/Marker.svelte"
 
   export let state: ThemeViewState
   let layout = state.layout
@@ -254,12 +255,7 @@
         htmlElem={openMapButton}
       >
         <div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
-          <img
-            role="presentation"
-            alt=""
-            class="mr-0.5 block h-4 w-4 sm:mr-1 md:mr-2 md:h-8 md:w-8"
-            src={layout.icon}
-          />
+          <Marker icons={layout.icon} size="h-4 w-4 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" ></Marker>
           <b class="mr-1">
             <Tr t={layout.title} />
           </b>
@@ -489,7 +485,8 @@
         </div>
 
         <div class="flex" slot="title0">
-          <img class="block h-4 w-4" src={layout.icon} />
+          <Marker icons={layout.icon} size="h-4 w-4"/>
+
           <Tr t={layout.title} />
         </div>