Refactoring: remove last of old SVG-bundling

src/UI/Base/Loading.ts

@@ -1,14 +1,14 @@
 import Combine from "./Combine"
-import Svg from "../../Svg"
 import Translations from "../i18n/Translations"
 import BaseUIElement from "../BaseUIElement"
-
+import SvelteUIElement from "./SvelteUIElement"
+import {default as LoadingSvg} from "../../assets/svg/Loading.svelte"
 export default class Loading extends Combine {
     constructor(msg?: BaseUIElement | string) {
         const t = Translations.W(msg) ?? Translations.t.general.loading
         t.SetClass("pl-2")
         super([
-            Svg.loading_svg()
+            new SvelteUIElement(LoadingSvg)
                 .SetClass("animate-spin self-center")
                 .SetStyle("width: 1.5rem; height: 1.5rem; min-width: 1.5rem;"),
             t,

src/UI/Image/DeleteImage.ts

@@ -2,12 +2,13 @@ import { Store } from "../../Logic/UIEventSource"
 import Translations from "../i18n/Translations"
 import Toggle, { ClickableToggle } from "../Input/Toggle"
 import Combine from "../Base/Combine"
-import Svg from "../../Svg"
 import { Tag } from "../../Logic/Tags/Tag"
 import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
 import { Changes } from "../../Logic/Osm/Changes"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Delete_icon from "../../assets/svg/Delete_icon.svelte"
 
 export default class DeleteImage extends Toggle {
     constructor(
@@ -48,7 +49,7 @@ export default class DeleteImage extends Toggle {
             .Clone()
             .SetClass("bg-white pl-4 pr-4")
             .SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;")
-        const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
+        const openDelete = new SvelteUIElement(Delete_icon).SetStyle("width: 2em; height: 2em; display:block;")
         const deleteDialog = new ClickableToggle(
             new Combine([deleteButton, cancelButton]).SetClass("flex flex-col background-black"),
             openDelete

src/UI/OpeningHours/OpeningHoursRange.ts

@@ -1,12 +1,13 @@
 /**
  * A single opening hours range, shown on top of the OH-picker table
  */
-import Svg from "../../Svg"
 import { Utils } from "../../Utils"
 import Combine from "../Base/Combine"
 import { OH, OpeningHour } from "./OpeningHours"
 import BaseUIElement from "../BaseUIElement"
 import { FixedUiElement } from "../Base/FixedUiElement"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Delete_icon from "../../assets/svg/Delete_icon.svelte"
 
 export default class OpeningHoursRange extends BaseUIElement {
     private _oh: OpeningHour
@@ -30,7 +31,7 @@ export default class OpeningHoursRange extends BaseUIElement {
             Utils.TwoDigits(oh.endHour) + ":" + Utils.TwoDigits(oh.endMinutes)
         )
 
-        const deleteRange = Svg.delete_icon_svg()
+        const deleteRange = new SvelteUIElement(Delete_icon)
             .SetClass("rounded-full w-6 h-6 block bg-black pointer-events-auto  ")
             .onClick(() => {
                 this._onDelete()

src/UI/Popup/ImportButtons/ImportFlow.svelte

@@ -16,11 +16,10 @@
   import TagHint from "../TagHint.svelte"
   import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
   import { Store } from "../../../Logic/UIEventSource"
-  import Svg from "../../../Svg"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
   import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
   import FilteredLayer from "../../../Models/FilteredLayer"
   import Confirm from "../../../assets/svg/Confirm.svelte"
+  import Layers from "../../../assets/svg/Layers.svelte"
 
   export let importFlow: ImportFlow<ImportFlowArguments>
   let state = importFlow.state
@@ -77,7 +76,7 @@
           state.guistate.openFilterView(filteredLayer.layerDef)
         }}
       >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+        <Layers class="w-12"/>
         <Tr t={Translations.t.general.add.openLayerControl} />
       </button>
 
@@ -120,7 +119,7 @@
           state.guistate.openFilterView(filteredLayer.layerDef)
         }}
       >
-        <ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
+        <Layers class="w-12"/>
         <Tr t={Translations.t.general.add.openLayerControl} />
       </button>
     </div>

src/UI/Popup/LoginButton.ts

@@ -1,6 +1,5 @@
 import { SubtleButton } from "../Base/SubtleButton"
 import BaseUIElement from "../BaseUIElement"
-import Svg from "../../Svg"
 import { OsmConnection, OsmServiceState } from "../../Logic/Osm/OsmConnection"
 import { VariableUiElement } from "../Base/VariableUIElement"
 import Loading from "../Base/Loading"
@@ -8,6 +7,9 @@ import Translations from "../i18n/Translations"
 import { ImmutableStore, Store } from "../../Logic/UIEventSource"
 import Combine from "../Base/Combine"
 import { Translation } from "../i18n/Translation"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Login from "../../assets/svg/Login.svelte"
+import Invalid from "../../assets/svg/Invalid.svelte"
 
 class LoginButton extends SubtleButton {
     constructor(
@@ -17,7 +19,7 @@ class LoginButton extends SubtleButton {
         },
         icon?: BaseUIElement | string
     ) {
-        super(icon ?? Svg.login_svg(), text)
+        super(icon ?? new SvelteUIElement(Login), text)
         this.onClick(() => {
             state.osmConnection?.AttemptLogin()
         })
@@ -65,7 +67,7 @@ export class LoginToggle extends VariableUiElement {
                     const apiTranslation = offlineModes[apiState]
                     if (apiTranslation !== undefined) {
                         return new Combine([
-                            Svg.invalid_svg().SetClass("w-8 h-8 m-2 shrink-0"),
+                            new SvelteUIElement(Invalid).SetClass("w-8 h-8 m-2 shrink-0"),
                             apiTranslation,
                         ]).SetClass("flex items-center alert max-w-64")
                     }
@@ -84,7 +86,7 @@ export class LoginToggle extends VariableUiElement {
                     return new LoginButton(
                         Translations.t.general.loginFailed,
                         state,
-                        Svg.invalid_svg()
+                        new SvelteUIElement(Invalid)
                     )
                 },
                 [state.featureSwitchUserbadge, state.osmConnection?.apiIsOnline]

src/UI/Popup/Notes/CreateNewNote.svelte

@@ -13,13 +13,12 @@
   import LoginToggle from "../../Base/LoginToggle.svelte"
   import FilteredLayer from "../../../Models/FilteredLayer"
   import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
-  import Svg from "../../../Svg"
   import Layers from "../../../assets/svg/Layers.svelte"
   import AddSmall from "../../../assets/svg/AddSmall.svelte"
   import type { OsmTags } from "../../../Models/OsmFeature"
   import Loading from "../../Base/Loading.svelte"
   import NextButton from "../../Base/NextButton.svelte"
+  import Note from "../../../assets/svg/Note.svelte"
 
   export let coordinate: UIEventSource<{ lon: number; lat: number }>
   export let state: SpecialVisualizationState
@@ -124,7 +123,7 @@
         <div class="h-56 w-full">
           <NewPointLocationInput value={coordinate} {state}>
             <div class="h-20 w-full pb-10" slot="image">
-              <ToSvelte construct={Svg.note_svg().SetClass("h-10 w-full")} />
+              <Note class="h-10 w-full"/>
             </div>
           </NewPointLocationInput>
         </div>

src/UI/Popup/SendEmail.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
   import type { OsmTags } from "../../Models/OsmFeature"
-  import Svg from "../../Svg"
-  import ToSvelte from "../Base/ToSvelte.svelte"
   import { Utils } from "../../Utils"
   import { Store } from "../../Logic/UIEventSource"
   import Envelope from "../../assets/svg/Envelope.svelte"