Refactoring: remove unused asset, further stripping of Svg.ts

assets/svg/satellite.svg

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
-  <g id="surface1">
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 94.136719 118.066406 L 102.421875 126.351562 L 127.28125 101.492188 L 118.996094 93.207031 Z M 94.136719 118.066406 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(53.333336%,52.549022%,57.647061%);fill-opacity:1;" d="M 102.421875 84.917969 L 94.136719 93.207031 L 106.566406 105.636719 L 123.140625 89.0625 C 127.707031 84.496094 127.710938 77.058594 123.140625 72.488281 L 98.28125 47.628906 C 93.710938 43.058594 86.273438 43.0625 81.707031 47.628906 L 77.5625 51.773438 L 102.421875 76.632812 C 104.710938 78.921875 104.710938 82.632812 102.421875 84.917969 Z M 102.421875 84.917969 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(71.372551%,72.156864%,74.509805%);fill-opacity:1;" d="M 94.136719 93.207031 L 85.851562 101.492188 C 83.5625 103.78125 79.851562 103.78125 77.5625 101.492188 L 52.703125 76.632812 L 48.5625 80.777344 C 43.992188 85.34375 43.992188 92.777344 48.5625 97.347656 L 73.421875 122.207031 C 77.992188 126.777344 85.425781 126.777344 89.992188 122.207031 L 94.136719 118.066406 L 106.566406 105.636719 Z M 94.136719 93.207031 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 272.292969 97.347656 L 235.003906 134.636719 L 210.144531 109.777344 L 247.433594 72.488281 Z M 272.292969 97.347656 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 214.289062 39.34375 L 189.429688 64.203125 C 182.578125 71.058594 182.578125 82.207031 189.429688 89.0625 L 201.859375 101.492188 L 239.148438 64.203125 Z M 214.289062 39.34375 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 317.871094 51.773438 L 280.582031 89.0625 L 255.722656 64.203125 L 293.011719 26.914062 Z M 317.871094 51.773438 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 284.722656 18.628906 L 272.292969 6.199219 C 265.441406 -0.65625 254.289062 -0.65625 247.433594 6.199219 L 222.574219 31.058594 L 247.433594 55.917969 Z M 284.722656 18.628906 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 351.015625 84.917969 L 313.726562 122.207031 L 288.867188 97.347656 L 326.15625 60.058594 Z M 351.015625 84.917969 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 305.441406 130.496094 L 268.152344 167.78125 L 243.292969 142.925781 L 280.582031 105.636719 Z M 305.441406 130.496094 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 346.871094 155.355469 L 371.730469 130.496094 C 378.585938 123.640625 378.585938 112.488281 371.730469 105.636719 L 359.300781 93.207031 L 322.011719 130.496094 Z M 346.871094 155.355469 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 276.4375 176.070312 L 288.867188 188.5 C 295.722656 195.351562 306.871094 195.351562 313.726562 188.5 L 338.585938 163.640625 L 313.726562 138.78125 Z M 276.4375 176.070312 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(53.333336%,52.549022%,57.647061%);fill-opacity:1;" d="M 359.300781 93.207031 L 351.015625 84.917969 L 313.726562 122.207031 L 288.867188 97.347656 L 326.15625 60.058594 L 317.871094 51.773438 L 280.582031 89.0625 L 255.722656 64.203125 L 293.011719 26.914062 L 284.722656 18.628906 L 247.433594 55.917969 L 222.574219 31.058594 L 214.289062 39.34375 L 239.148438 64.203125 L 201.859375 101.492188 L 210.144531 109.777344 L 247.433594 72.488281 L 272.292969 97.347656 L 235.003906 134.636719 L 226.71875 142.925781 L 235.003906 151.210938 L 243.292969 142.925781 L 280.582031 105.636719 L 305.441406 130.496094 L 268.152344 167.78125 L 276.4375 176.070312 L 313.726562 138.78125 L 338.585938 163.640625 L 346.871094 155.355469 L 322.011719 130.496094 Z M 359.300781 93.207031 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 89.992188 279.648438 L 52.703125 316.9375 L 27.84375 292.078125 L 65.132812 254.789062 Z M 89.992188 279.648438 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 102.421875 200.929688 L 89.992188 188.5 C 83.140625 181.644531 71.988281 181.644531 65.132812 188.5 L 40.273438 213.359375 L 65.132812 238.21875 Z M 102.421875 200.929688 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 31.988281 221.644531 L 7.128906 246.503906 C 0.277344 253.359375 0.277344 264.507812 7.128906 271.363281 L 19.558594 283.792969 L 56.847656 246.503906 Z M 31.988281 221.644531 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 135.570312 234.074219 L 98.28125 271.363281 L 73.421875 246.503906 L 110.710938 209.214844 Z M 135.570312 234.074219 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 164.570312 337.65625 L 189.429688 312.796875 C 196.285156 305.941406 196.285156 294.789062 189.429688 287.9375 L 177 275.507812 L 139.710938 312.796875 Z M 164.570312 337.65625 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 123.140625 312.796875 L 85.851562 350.085938 L 60.992188 325.226562 L 98.28125 287.9375 Z M 123.140625 312.796875 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 131.425781 370.800781 L 156.285156 345.941406 L 131.425781 321.082031 L 94.136719 358.371094 L 106.566406 370.800781 C 113.421875 377.652344 124.570312 377.652344 131.425781 370.800781 Z M 131.425781 370.800781 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 168.714844 267.21875 L 131.425781 304.507812 L 106.566406 279.648438 L 143.855469 242.359375 Z M 168.714844 267.21875 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(53.333336%,52.549022%,57.647061%);fill-opacity:1;" d="M 143.855469 225.789062 L 98.28125 271.363281 L 73.421875 246.503906 L 110.710938 209.214844 L 102.421875 200.929688 L 65.132812 238.21875 L 40.273438 213.359375 L 31.988281 221.644531 L 56.847656 246.503906 L 19.558594 283.792969 L 27.84375 292.078125 L 65.132812 254.789062 L 89.992188 279.648438 L 52.703125 316.9375 L 60.992188 325.226562 L 98.28125 287.9375 L 123.140625 312.796875 L 85.851562 350.085938 L 94.136719 358.371094 L 131.425781 321.082031 L 156.285156 345.941406 L 164.570312 337.65625 L 139.710938 312.796875 L 177 275.507812 L 168.714844 267.21875 L 131.425781 304.507812 L 106.566406 279.648438 L 152.140625 234.074219 Z M 143.855469 225.789062 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 218.433594 234.074219 L 227.34375 242.988281 C 229.636719 239.875 232.1875 236.890625 235.003906 234.074219 C 237.824219 231.257812 240.804688 228.707031 243.917969 226.414062 L 235.003906 217.5 L 226.71875 225.789062 Z M 218.433594 234.074219 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,81.176472%,0%);fill-opacity:1;" d="M 177 258.933594 C 181.570312 263.503906 189.003906 263.5 193.574219 258.933594 L 226.71875 225.789062 L 206.003906 205.070312 L 197.71875 213.359375 C 190.851562 220.222656 179.722656 220.222656 172.859375 213.359375 L 94.136719 134.636719 L 85.851562 142.925781 C 78.996094 149.777344 78.996094 160.929688 85.851562 167.78125 L 143.855469 225.789062 Z M 177 258.933594 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,57.647061%,0%);fill-opacity:1;" d="M 214.289062 196.785156 L 206.003906 205.070312 L 226.71875 225.789062 L 235.003906 217.5 L 259.863281 192.640625 C 264.433594 188.074219 264.433594 180.640625 259.863281 176.070312 L 226.71875 142.925781 L 168.714844 84.917969 C 161.859375 78.066406 150.710938 78.066406 143.855469 84.917969 L 135.570312 93.207031 L 214.289062 171.925781 C 221.15625 178.792969 221.15625 189.921875 214.289062 196.785156 Z M 214.289062 196.785156 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 299.582031 298.648438 L 286.441406 298.648438 L 274.722656 310.367188 L 303.011719 310.367188 L 306 313.355469 C 306.257812 312.390625 306.757812 311.480469 307.511719 310.722656 L 311.65625 306.582031 C 312.410156 305.824219 313.320312 305.324219 314.285156 305.066406 L 311.296875 302.082031 L 311.300781 273.789062 L 299.582031 285.507812 Z M 299.582031 298.648438 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(53.333336%,52.549022%,57.647061%);fill-opacity:1;" d="M 293.011719 292.078125 L 338.375 246.714844 C 340.699219 244.390625 341.945312 241.171875 341.792969 237.882812 C 341.648438 234.578125 340.101562 231.46875 337.5625 229.351562 C 310.191406 206.554688 271.773438 205.910156 243.917969 226.414062 C 240.804688 228.707031 237.824219 231.257812 235.003906 234.074219 Z M 293.011719 292.078125 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,81.176472%,0%);fill-opacity:1;" d="M 307.511719 310.722656 C 306.757812 311.480469 306.257812 312.390625 306 313.355469 C 305.476562 315.308594 305.980469 317.476562 307.511719 319.011719 L 319.941406 331.441406 C 322.230469 333.726562 325.941406 333.726562 328.226562 331.441406 L 332.371094 327.296875 C 334.660156 325.007812 334.660156 321.296875 332.371094 319.011719 L 319.941406 306.582031 C 318.410156 305.046875 316.238281 304.546875 314.285156 305.066406 C 313.320312 305.324219 312.410156 305.824219 311.65625 306.582031 Z M 307.511719 310.722656 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,45.490196%,0%);fill-opacity:1;" d="M 206.003906 205.070312 L 214.289062 196.785156 C 221.15625 189.921875 221.15625 178.792969 214.289062 171.925781 L 135.570312 93.207031 L 127.28125 101.492188 L 114.851562 113.921875 Z M 206.003906 205.070312 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(71.372551%,72.156864%,74.509805%);fill-opacity:1;" d="M 293.011719 292.078125 L 235.003906 234.074219 C 232.1875 236.890625 229.636719 239.875 227.34375 242.988281 C 206.839844 270.839844 207.484375 309.261719 230.285156 336.628906 C 232.402344 339.167969 235.507812 340.714844 238.8125 340.863281 C 242.101562 341.011719 245.324219 339.765625 247.644531 337.445312 Z M 293.011719 292.078125 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,57.647061%,0%);fill-opacity:1;" d="M 197.71875 213.359375 L 206.003906 205.070312 L 114.851562 113.921875 L 94.136719 134.636719 L 172.859375 213.359375 C 179.722656 220.222656 190.851562 220.222656 197.71875 213.359375 Z M 197.71875 213.359375 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(36.078432%,32.941177%,41.568628%);fill-opacity:1;" d="M 102.421875 84.917969 C 104.710938 82.632812 104.710938 78.921875 102.421875 76.632812 L 77.5625 51.773438 L 65.132812 64.203125 L 94.136719 93.207031 Z M 102.421875 84.917969 "/>
-    <path style=" stroke:none;fill-rule:nonzero;fill:rgb(53.333336%,52.549022%,57.647061%);fill-opacity:1;" d="M 85.851562 101.492188 L 94.136719 93.207031 L 65.132812 64.203125 L 52.703125 76.632812 L 77.5625 101.492188 C 79.851562 103.78125 83.5625 103.78125 85.851562 101.492188 Z M 85.851562 101.492188 "/>
-  </g>
-</svg>

scripts/generateIncludedImages.ts

@@ -65,6 +65,7 @@ function genImages(dryrun = false) {
         "mapillary_black",
         "mastodon",
         "min",
+        "move",
         "move-arrows",
         "move_confirm",
         "move_not_allowed",
@@ -77,8 +78,11 @@ function genImages(dryrun = false) {
         "plantnet_logo",
         "plus",
         "reload",
+        "resolved",
         "ring",
         "robot",
+        "search_disable",
+        "share",
         "SocialImageForeground",
         "speech_bubble",
         "speech_bubble_black_outline",
@@ -88,8 +92,10 @@ function genImages(dryrun = false) {
         "star_outline",
         "teardrop",
         "teardrop_with_hole_green",
+        "statistics",
         "translate",
         "triangle",
+        "up",
         "Upload",
         "wikidata",
         "wikimedia-commons-white",

src/UI/Base/LoginButton.svelte

@@ -2,15 +2,14 @@
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import Translations from "../i18n/Translations.js"
   import Tr from "./Tr.svelte"
-  import ToSvelte from "./ToSvelte.svelte"
+  import Login from "../../assets/svg/Login.svelte"
-  import Svg from "../../Svg"
 
   export let osmConnection: OsmConnection
   export let clss: string | undefined = undefined
 </script>
 
 <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
-  <ToSvelte construct={Svg.login_svg().SetClass("w-12 m-1")} />
+  <Login class="w-12 m-1" />
   <slot>
     <Tr t={Translations.t.general.loginWithOpenStreetMap} />
   </slot>

src/UI/BigComponents/BackgroundSwitcher.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import type { RasterLayerPolygon } from "../../Models/RasterLayers"
-  import { AvailableRasterLayers } from "../../Models/RasterLayers"
-  import { createEventDispatcher, onDestroy } from "svelte"
-  import Svg from "../../Svg"
-  import { Map as MlMap } from "maplibre-gl"
-  import type { MapProperties } from "../../Models/MapProperties"
-  import OverlayMap from "../Map/OverlayMap.svelte"
-  import RasterLayerPicker from "../Map/RasterLayerPicker.svelte"
-
-  export let mapproperties: MapProperties
-  export let normalMap: UIEventSource<MlMap>
-  /**
-   * The current background (raster) layer of the polygon.
-   * This is undefined if a vector layer is used
-   */
-  let rasterLayer: UIEventSource<RasterLayerPolygon | undefined> = mapproperties.rasterLayer
-  let name = rasterLayer.data?.properties?.name
-  let icon = Svg.satellite_svg()
-  onDestroy(
-    rasterLayer.addCallback((polygon) => {
-      name = polygon.properties?.name
-    })
-  )
-  /**
-   * The layers that this component can offer as a choice.
-   */
-  export let availableRasterLayers: Store<RasterLayerPolygon[]>
-
-  let raster0 = new UIEventSource<RasterLayerPolygon>(undefined)
-
-  let raster1 = new UIEventSource<RasterLayerPolygon>(undefined)
-
-  let currentLayer: RasterLayerPolygon
-
-  function updatedAltLayer() {
-    const available = availableRasterLayers.data
-    const current = rasterLayer.data
-    const defaultLayer = AvailableRasterLayers.maptilerDefaultLayer
-    const firstOther = available.find((l) => l !== defaultLayer)
-    const secondOther = available.find((l) => l !== defaultLayer && l !== firstOther)
-    raster0.setData(firstOther === current ? defaultLayer : firstOther)
-    raster1.setData(secondOther === current ? defaultLayer : secondOther)
-  }
-
-  updatedAltLayer()
-  onDestroy(mapproperties.rasterLayer.addCallbackAndRunD(updatedAltLayer))
-  onDestroy(availableRasterLayers.addCallbackAndRunD(updatedAltLayer))
-
-  function use(rasterLayer: UIEventSource<RasterLayerPolygon>): () => void {
-    return () => {
-      currentLayer = undefined
-      mapproperties.rasterLayer.setData(rasterLayer.data)
-    }
-  }
-
-  const dispatch = createEventDispatcher<{ copyright_clicked }>()
-</script>
-
-<div class="flex items-end opacity-50 hover:opacity-100">
-  <div class="flex flex-col md:flex-row">
-    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster0)}>
-      <OverlayMap
-        placedOverMap={normalMap}
-        placedOverMapProperties={mapproperties}
-        rasterLayer={raster0}
-      />
-    </button>
-    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster1)}>
-      <OverlayMap
-        placedOverMap={normalMap}
-        placedOverMapProperties={mapproperties}
-        rasterLayer={raster1}
-      />
-    </button>
-  </div>
-  <div class="ml-1 flex h-fit flex-col gap-y-1 text-sm">
-    <div class="low-interaction w-64 rounded p-1">
-      <RasterLayerPicker
-        availableLayers={availableRasterLayers}
-        value={mapproperties.rasterLayer}
-      />
-    </div>
-
-    <button class="small" on:click={() => dispatch("copyright_clicked")}>© OpenStreetMap</button>
-  </div>
-</div>

src/UI/BigComponents/Histogram.ts

@@ -5,7 +5,9 @@ import Combine from "../Base/Combine"
 import { FixedUiElement } from "../Base/FixedUiElement"
 import { Utils } from "../../Utils"
 import BaseUIElement from "../BaseUIElement"
-import Svg from "../../Svg"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Up from "../../assets/svg/Up.svelte"
+import Circle from "../../assets/svg/Circle.svelte"
 
 export default class Histogram<T> extends VariableUiElement {
     private static defaultPalette = [
@@ -34,11 +36,11 @@ export default class Histogram<T> extends VariableUiElement {
             sortMode.map((m) => {
                 switch (m) {
                     case "name":
-                        return Svg.up_svg()
+                        return new SvelteUIElement(Up)
                     case "name-rev":
-                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
+                        return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
                     default:
-                        return Svg.circle_svg()
+                        return new SvelteUIElement(Circle)
                 }
             })
         )
@@ -56,11 +58,11 @@ export default class Histogram<T> extends VariableUiElement {
             sortMode.map((m) => {
                 switch (m) {
                     case "count":
-                        return Svg.up_svg()
+                        return new SvelteUIElement(Up)
                     case "count-rev":
-                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
+                        return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
                     default:
-                        return Svg.circle_svg()
+                        return new SvelteUIElement(Circle)
                 }
             })
         )

src/UI/BigComponents/NoThemeResultButton.svelte

@@ -17,6 +17,7 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
+  import Search_disable from "../../assets/svg/Search_disable.svelte"
 
   export let search: UIEventSource<string>
 
@@ -27,8 +28,8 @@
   <h5>{t.noMatchingThemes.toString()}</h5>
   <div class="flex justify-center">
     <button on:click={() => search.setData("")}>
-      <ToSvelte construct={Svg.search_disable_svg().SetClass("w-6 mr-2")} />
+      <Search_disable class="w-6 mr-2" />
-      <Tr slot="message" t={t.noSearch} />
+      <Tr t={t.noSearch} />
     </button>
   </div>
 </div>

src/UI/BigComponents/ShareScreen.svelte

@@ -14,6 +14,7 @@
   import Svg from "../../Svg"
   import ToSvelte from "../Base/ToSvelte.svelte"
   import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
+  import Share from "../../assets/svg/Share.svelte"
 
   export let state: ThemeViewState
   const tr = Translations.t.general.sharescreen
@@ -73,7 +74,7 @@
   <div class="flex">
     {#if typeof navigator?.share === "function"}
       <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
-        <ToSvelte construct={Svg.share_svg()} />
+        <Share/>
       </button>
     {/if}
     {#if navigator.clipboard !== undefined}

src/UI/StylesheetTestGui.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import Svg from "../Svg"
   import Loading from "./Base/Loading.svelte"
-  import ToSvelte from "./Base/ToSvelte.svelte"
   import Community from "../assets/svg/Community.svelte"
+  import Login from "../assets/svg/Login.svelte"
 </script>
 
 <div>
@@ -23,7 +22,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
   </div>
 
@@ -92,7 +91,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
   </div>
 
@@ -134,7 +133,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
     <div>
       <label for="html0">