Refactoring: remove last of old SVG-bundling

scripts/generateIncludedImages.ts

@@ -1,118 +1,9 @@
 import * as fs from "fs"
+import Script from "./Script"
 
 function genImages(dryrun = false) {
     console.log("Generating images")
-    // These images are not referenced via 'Svg.ts' anymore and can be ignored
-    const blacklist: string[] = [
-        "add",
-        "addSmall",
-        "back",
-        "circle",
-        "blocked",
-        "brick_wall",
-        "brick_wall_raw",
-        "brick_wall_round",
-        "brick_wall_square",
-        "bug",
-        "center",
-        "checkmark",
-        "clock",
-        "close",
-        "community",
-        "compass",
-        "compass_arrow",
-        "confirm",
-        "copyright",
-        "cross",
-        "cross_bottom_right",
-        "crosshair",
-        "crosshair_locked",
-        "crosshair-locked",
-        "delete_not_allowed",
-        "direction_gradient",
-        "direction_stroke",
-        "duplicate",
-        "elevator",
-        "elevator_wheelchair",
-        "envelope",
-        "eye",
-        "filter",
-        "filter_disable",
-        "floppy",
-        "gear",
-        "gender_bi",
-        "gender_inter",
-        "gender_female",
-        "gender_male",
-        "gender_trans",
-        "gender_queer",
-        "generic_map",
-        "gps_arrow",
-        "hand",
-        "help",
-        "home",
-        "length_crosshair",
-        "length-crosshair",
-        "liberapay",
-        "location",
-        "location_empty",
-        "location_locked",
-        "location_refused",
-        "location-refused",
-        "location_unlocked",
-        "logo",
-        "logout",
-        "mapcomplete_logo",
-        "mapillary",
-        "mapillary_black",
-        "mastodon",
-        "min",
-        "move",
-        "move-arrows",
-        "move_confirm",
-        "move_not_allowed",
-        "not_found",
-        "osm_logo_us",
-        "osm-logo-us",
-        "party",
-        "pencil",
-        "person",
-        "pin",
-        "plantnet_logo",
-        "plus",
-        "reload",
-        "resolved",
-        "ring",
-        "robot",
-        "scissors",
-        "search",
-        "search_disable",
-        "share",
-        "SocialImageForeground",
-        "speech_bubble",
-        "speech_bubble_black_outline",
-        "square",
-        "square_rounded",
-        "star",
-        "star_half",
-        "star_outline",
-        "teardrop",
-        "teardrop_with_hole_green",
-        "statistics",
-        "translate",
-        "triangle",
-        "up",
-        "Upload",
-        "wikidata",
-        "wikimedia-commons-white",
-        "wikimedia_commons_white",
-        "wikipedia",
-        "github",
-    ].map((s) => s.toLowerCase())
     const dir = fs.readdirSync("./assets/svg")
-
-    let module =
-        'import Img from "./UI/Base/Img";\n\n/* @deprecated */\nexport default class Svg {\n\n\n'
     for (const path of dir) {
         if (path.endsWith("license_info.json")) {
             continue
@@ -133,7 +24,7 @@ function genImages(dryrun = false) {
             .replace(/\n/g, " ")
             .replace(/\r/g, "")
             .replace(/\\/g, "\\")
-            .replace(/"/g, '\\"')
+            .replace(/"/g, "\\\"")
             .replaceAll(" ", " ")
 
         let hasNonAsciiChars = Array.from(svg)
@@ -147,35 +38,29 @@ function genImages(dryrun = false) {
 
         const nameUC = name.toUpperCase().at(0) + name.substring(1)
         const svelteCode =
-            '<script>\nexport let color = "#000000"\n</script>\n' +
+            "<script>\nexport let color = \"#000000\"\n</script>\n" +
             svg
                 .replace(
                     "<svg ",
-                    "<svg {...$$$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown "
+                    "<svg {...$$$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown ",
                 )
-                .replace(/\\"/g, '"')
+                .replace(/\\"/g, "\"")
                 .replace(/(rgb\(0%,0%,0%\)|#000000|#000)/g, "{color}")
         fs.writeFileSync("./src/assets/svg/" + nameUC + ".svelte", svelteCode, "utf8")
 
-        if (blacklist.some((item) => path.toLowerCase().endsWith(item + ".svg"))) {
-            continue
     }
-        if (dryrun) {
-            svg = "<omitting svg - dryrun>"
 }
 
-        let rawName = name
 
-        module += `    public static ${name} = "${svg}"\n`
+class GenerateIncludedImages extends Script {
-        if (!dryrun) {
+    constructor() {
-            module += `    public static ${name}_svg() { return new Img(Svg.${rawName}, true);}\n`
+        super("Converts all images from assets/svg into svelte-classes.")
-        } else {
-            module += `    public static ${name}_svg() { return new Img("", true);}\n`
-        }
-    }
-    module += "}\n"
-    fs.writeFileSync("src/Svg.ts", module)
-    console.log("Done")
     }
 
+    async main(args: string[]): Promise<void> {
         genImages()
+
+    }
+}
+
+new GenerateIncludedImages().run()

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"