Refactoring: more removal of old-style SVG bundling

scripts/generateIncludedImages.ts

@@ -4,6 +4,30 @@ 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",
+        "brick_wall_square",
+        "clock",
+        "community",
+        "copyright",
+        "cross",
+        "cross_bottom_right",
+        "crosshair_locked",
+        "delete_not_allowed",
+        "direction_gradient",
+        "direction_stroke",
+        "duplicate",
+        "elevator",
+        "elevator_wheelchair",
+        "liberapay",
+        "length_crosshair",
+        "speech_bubble_black_outline",
+        "square",
+        "star_half",
+        "star_outline",
+        "star",
+        "osm_logo_us",
+
         "SocialImageForeground",
         "wikipedia",
         "Upload",

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
-  import Translations from "../i18n/Translations"
+  import Translations from "../i18n/Translations";
-  import Svg from "../../Svg"
+  import Tr from "../Base/Tr.svelte";
-  import Tr from "../Base/Tr.svelte"
+  import NextButton from "../Base/NextButton.svelte";
-  import NextButton from "../Base/NextButton.svelte"
+  import Geosearch from "./Geosearch.svelte";
-  import Geosearch from "./Geosearch.svelte"
+  import ThemeViewState from "../../Models/ThemeViewState";
-  import ToSvelte from "../Base/ToSvelte.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource";
-  import ThemeViewState from "../../Models/ThemeViewState"
+  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid";
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { twJoin } from "tailwind-merge";
-  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import { Utils } from "../../Utils";
-  import { twJoin } from "tailwind-merge"
+  import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState";
-  import { Utils } from "../../Utils"
+  import { GeoLocationState } from "../../Logic/State/GeoLocationState";
-  import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
+  import If from "../Base/If.svelte";
-  import { GeoLocationState } from "../../Logic/State/GeoLocationState"
+  import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini";
-  import If from "../Base/If.svelte"
+  import type { Readable } from "svelte/store";
-  import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
-  import type { Readable } from "svelte/store"
   import Add from "../../assets/svg/Add.svelte";
+  import Location_refused from "../../assets/svg/Location_refused.svelte";
+  import Crosshair from "../../assets/svg/Crosshair.svelte";
 
   /**
    * The theme introduction panel
@@ -71,7 +71,7 @@
       <If condition={state.featureSwitches.featureSwitchGeolocation}>
         {#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
           <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
-            <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
+            <Crosshair  class="w-8 h-8"/>
             <Tr t={Translations.t.general.openTheMapAtGeolocation} />
           </button>
           <!-- No geolocation granted - we don't show the button -->
@@ -81,25 +81,17 @@
             on:click={jumpToCurrentLocation}
           >
             <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
-            <ToSvelte
+            <Crosshair class="w-8 h-8" style="animation: 3s linear 0s infinite normal none running spin;" />
-              construct={Svg.crosshair_svg()
-                .SetClass("w-8 h-8")
-                .SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
-            />
             <Tr t={Translations.t.general.waitingForGeopermission} />
           </button>
         {:else if $geopermission === "denied"}
           <button class="disabled flex w-full items-center gap-x-2">
-            <ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
+            <Location_refused class="w-8 h-8"/>
             <Tr t={Translations.t.general.geopermissionDenied} />
           </button>
         {:else}
           <button class="disabled flex w-full items-center gap-x-2">
-            <ToSvelte
+            <Crosshair class="w-8 h-8" style="animation: 3s linear 0s infinite normal none running spin;" />
-              construct={Svg.crosshair_svg()
-                .SetClass("w-8 h-8")
-                .SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
-            />
             <Tr t={Translations.t.general.waitingForLocation} />
           </button>
         {/if}

src/UI/InputElement/Helpers/DirectionInput.svelte

@@ -6,6 +6,7 @@
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import Svg from "../../../Svg.js"
+  import Direction_stroke from "../../../assets/svg/Direction_stroke.svelte";
 
   /**
    * A visualisation to pick a direction on a map background.
@@ -67,6 +68,6 @@
   </div>
 
   <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">
-    <ToSvelte construct={Svg.direction_stroke_svg} />
+    <Direction_stroke/>
   </div>
 </div>

src/UI/Map/Icon.svelte

@@ -85,8 +85,6 @@
       <Checkmark {color} />
     {:else if icon === "help"}
       <Help {color} />
-    {:else if icon === "clock"}
-      <Clock {color} />
     {:else if icon === "close"}
       <Close {color} />
     {:else if icon === "invalid"}

src/UI/Reviews/StarElement.svelte

@@ -2,6 +2,9 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Svg from "../../Svg"
   import { createEventDispatcher } from "svelte"
+  import Star from "../../assets/svg/Star.svelte";
+  import Star_half from "../../assets/svg/Star_half.svelte";
+  import Star_outline from "../../assets/svg/Star_outline.svelte";
 
   export let score: number
   export let cutoff: number
@@ -23,10 +26,10 @@
   on:mousemove={(e) => dispatch("hover", { score: getScore(e) })}
 >
   {#if score >= cutoff}
-    <ToSvelte construct={Svg.star_svg().SetClass(starSize)} />
+    <Star class={starSize}/>
   {:else if score + 10 >= cutoff}
-    <ToSvelte construct={Svg.star_half_svg().SetClass(starSize)} />
+    <Star_half class={starSize}/>
   {:else}
-    <ToSvelte construct={Svg.star_outline_svg().SetClass(starSize)} />
+    <Star_outline class={starSize}/>
   {/if}
 </div>

src/UI/StylesheetTestGui.svelte

@@ -2,6 +2,7 @@
   import Svg from "../Svg";
   import Loading from "./Base/Loading.svelte";
   import ToSvelte from "./Base/ToSvelte.svelte";
+  import Community from "../assets/svg/Community.svelte";
 </script>
 
 <div>
@@ -40,16 +41,16 @@
 
     <div class="flex">
       <button class="primary">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Main action
       </button>
       <button class="primary disabled">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Main action (disabled)
       </button>
 
       <button class="small">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Small button
       </button>
 
@@ -59,11 +60,11 @@
     </div>
     <div class="flex">
       <button>
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Secondary action
       </button>
       <button class="disabled">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Secondary action (disabled)
       </button>
     </div>
@@ -82,7 +83,7 @@
       </label>
       <label for="javascript">
         <input id="javascript" name="fav_language" type="radio" value="JavaScript" />
-        <ToSvelte construct={Svg.community_svg().SetClass("w-8 h-8")} />
+        <Community class="w-8 h-8"/>
         JavaScript
       </label>
     </div>
@@ -106,26 +107,26 @@
 
     <div class="flex">
       <button class="primary">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Main action
       </button>
       <button class="primary disabled">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Main action (disabled)
       </button>
       <button class="small">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Small button
       </button>
     </div>
 
     <div class="flex">
       <button>
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Secondary action
       </button>
       <button class="disabled">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6" />
         Secondary action (disabled)
       </button>
     </div>

src/UI/ThemeViewGUI.svelte

@@ -36,7 +36,6 @@
   import LevelSelector from "./BigComponents/LevelSelector.svelte";
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
   import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
-  import Svg from "../Svg";
   import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte";
   import type { RasterLayerPolygon } from "../Models/RasterLayers";
   import { AvailableRasterLayers } from "../Models/RasterLayers";
@@ -62,6 +61,9 @@
   import Filter from "../assets/svg/Filter.svelte";
   import Add from "../assets/svg/Add.svelte";
   import Statistics from "../assets/svg/Statistics.svelte";
+  import Community from "../assets/svg/Community.svelte";
+  import Download from "../assets/svg/Download.svelte";
+  import Share from "../assets/svg/Share.svelte";
 
   export let state: ThemeViewState;
   let layout = state.layout;
@@ -371,7 +373,7 @@
 
       <div class="flex" slot="title2">
         <If condition={state.featureSwitches.featureSwitchEnableExport}>
-          <ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
+          <Download class="w-4 h-4"/>
           <Tr t={Translations.t.general.download.title} />
         </If>
       </div>
@@ -386,7 +388,7 @@
       <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
 
       <div class="flex" slot="title4">
-        <ToSvelte construct={Svg.share_svg().SetClass("w-4 h-4")} />
+        <Share class="w-4 h-4"/>
         <Tr t={Translations.t.general.sharescreen.title} />
       </div>
       <div class="m-2" slot="content4">
@@ -492,7 +494,7 @@
       </div>
 
       <div class="flex" slot="title2">
-        <ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
+        <Community class="w-6 h-6"/>
         <Tr t={Translations.t.communityIndex.title} />
       </div>
       <div class="m-2" slot="content2">