From 50657c1d8f90d08bf5b59dc191ffb6b9e3d4d3c7 Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Fri, 6 Jun 2025 12:44:53 +0200
Subject: [PATCH] chore: Typescript: Rewrite VehicleIcon (#21633)

Co-authored-by: Michael Geers <michael@geers.tv>
---
 .../components/MultiIcon/MultiIcon.stories.ts |   6 +-
 assets/js/components/MultiIcon/MultiIcon.vue  |   5 +-
 .../js/components/VehicleIcon/Airpurifier.vue |   8 +-
 assets/js/components/VehicleIcon/Battery.vue  |   8 +-
 assets/js/components/VehicleIcon/Bike.vue     |   8 +-
 assets/js/components/VehicleIcon/Bulb.vue     |   8 +-
 assets/js/components/VehicleIcon/Bus.vue      |   8 +-
 assets/js/components/VehicleIcon/Climate.vue  |   8 +-
 .../js/components/VehicleIcon/Coffeemaker.vue |   8 +-
 assets/js/components/VehicleIcon/Compute.vue  |   8 +-
 assets/js/components/VehicleIcon/Cooking.vue  |   8 +-
 assets/js/components/VehicleIcon/Cooler.vue   |   8 +-
 assets/js/components/VehicleIcon/Desktop.vue  |   7 +-
 assets/js/components/VehicleIcon/Device.vue   |   7 +-
 .../js/components/VehicleIcon/Dishwasher.vue  |   7 +-
 assets/js/components/VehicleIcon/Dryer.vue    |   7 +-
 .../js/components/VehicleIcon/Floorlamp.vue   |   7 +-
 assets/js/components/VehicleIcon/Generic.vue  |   7 +-
 assets/js/components/VehicleIcon/Heater.vue   |   7 +-
 .../components/VehicleIcon/Heatexchange.vue   |   7 +-
 assets/js/components/VehicleIcon/Heatpump.vue |   7 +-
 assets/js/components/VehicleIcon/Kettle.vue   |   7 +-
 assets/js/components/VehicleIcon/Laundry.vue  |   8 +-
 assets/js/components/VehicleIcon/Laundry2.vue |   8 +-
 assets/js/components/VehicleIcon/Machine.vue  |   8 +-
 assets/js/components/VehicleIcon/Meter.vue    |   8 +-
 .../js/components/VehicleIcon/Microwave.vue   |   8 +-
 assets/js/components/VehicleIcon/Moped.vue    |   8 +-
 .../js/components/VehicleIcon/Motorcycle.vue  |   8 +-
 assets/js/components/VehicleIcon/Pump.vue     |   8 +-
 assets/js/components/VehicleIcon/Rickshaw.vue |   8 +-
 assets/js/components/VehicleIcon/Rocket.vue   |   8 +-
 assets/js/components/VehicleIcon/Scooter.vue  |   8 +-
 assets/js/components/VehicleIcon/Shuttle.vue  |   8 +-
 .../components/VehicleIcon/SmartConsumer.vue  |   8 +-
 assets/js/components/VehicleIcon/Taxi.vue     |   8 +-
 assets/js/components/VehicleIcon/Tool.vue     |   8 +-
 assets/js/components/VehicleIcon/Tractor.vue  |   8 +-
 assets/js/components/VehicleIcon/Van.vue      |   8 +-
 .../VehicleIcon/VehicleIcon.stories.js        | 104 -----------------
 .../VehicleIcon/VehicleIcon.stories.ts        | 106 ++++++++++++++++++
 .../js/components/VehicleIcon/VehicleIcon.vue |  20 ++--
 .../js/components/VehicleIcon/WaterHeater.vue |   8 +-
 .../VehicleIcon/{index.js => index.ts}        |   0
 assets/js/types/evcc.ts                       |   8 ++
 45 files changed, 312 insertions(+), 231 deletions(-)
 delete mode 100644 assets/js/components/VehicleIcon/VehicleIcon.stories.js
 create mode 100644 assets/js/components/VehicleIcon/VehicleIcon.stories.ts
 rename assets/js/components/VehicleIcon/{index.js => index.ts} (100%)

diff --git a/assets/js/components/MultiIcon/MultiIcon.stories.ts b/assets/js/components/MultiIcon/MultiIcon.stories.ts
index f704f854c..687c1f9ae 100644
--- a/assets/js/components/MultiIcon/MultiIcon.stories.ts
+++ b/assets/js/components/MultiIcon/MultiIcon.stories.ts
@@ -1,3 +1,4 @@
+import { ICON_SIZE } from "@/types/evcc";
 import MultiIcon from "./MultiIcon.vue";
 import type { Meta, StoryFn } from "@storybook/vue3";
 
@@ -10,7 +11,8 @@ export default {
 			description: "Number of icons to display",
 		},
 		size: {
-			control: { type: "select", options: ["sm", "md", "lg", "xl"] },
+			options: Object.values(ICON_SIZE),
+			control: { type: "select" },
 			description: "Size of the icons",
 		},
 	},
@@ -41,5 +43,5 @@ export const AllCounts: StoryFn<typeof MultiIcon> = (args) => ({
 });
 
 AllCounts.args = {
-	size: "xl",
+	size: ICON_SIZE.XL,
 };
diff --git a/assets/js/components/MultiIcon/MultiIcon.vue b/assets/js/components/MultiIcon/MultiIcon.vue
index 7e567ac71..52303cf5a 100644
--- a/assets/js/components/MultiIcon/MultiIcon.vue
+++ b/assets/js/components/MultiIcon/MultiIcon.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 import _1 from "./1.vue";
 import _2 from "./2.vue";
 import _3 from "./3.vue";
@@ -14,6 +14,7 @@ import _7 from "./7.vue";
 import _8 from "./8.vue";
 import _9 from "./9.vue";
 import Plus from "./Plus.vue";
+import { ICON_SIZE } from "@/types/evcc";
 
 const icons = {
 	_1,
@@ -31,7 +32,7 @@ export default defineComponent({
 	name: "MultiIcon",
 	props: {
 		count: { type: Number, default: 1 },
-		size: { type: String, default: "s" },
+		size: { type: String as PropType<ICON_SIZE>, default: ICON_SIZE.S },
 	},
 	computed: {
 		icon() {
diff --git a/assets/js/components/VehicleIcon/Airpurifier.vue b/assets/js/components/VehicleIcon/Airpurifier.vue
index a3abc4cf1..7da26a0f0 100644
--- a/assets/js/components/VehicleIcon/Airpurifier.vue
+++ b/assets/js/components/VehicleIcon/Airpurifier.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Airpurifier",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Battery.vue b/assets/js/components/VehicleIcon/Battery.vue
index 4ff7f037a..82c775614 100644
--- a/assets/js/components/VehicleIcon/Battery.vue
+++ b/assets/js/components/VehicleIcon/Battery.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Battery",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Bike.vue b/assets/js/components/VehicleIcon/Bike.vue
index 22d4381a3..6042c3155 100644
--- a/assets/js/components/VehicleIcon/Bike.vue
+++ b/assets/js/components/VehicleIcon/Bike.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bike",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Bulb.vue b/assets/js/components/VehicleIcon/Bulb.vue
index a6e0a86c3..146183128 100644
--- a/assets/js/components/VehicleIcon/Bulb.vue
+++ b/assets/js/components/VehicleIcon/Bulb.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bulb",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Bus.vue b/assets/js/components/VehicleIcon/Bus.vue
index 0ab841554..6e6ffc8cf 100644
--- a/assets/js/components/VehicleIcon/Bus.vue
+++ b/assets/js/components/VehicleIcon/Bus.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Bus",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Climate.vue b/assets/js/components/VehicleIcon/Climate.vue
index 8754870d4..9ac665441 100644
--- a/assets/js/components/VehicleIcon/Climate.vue
+++ b/assets/js/components/VehicleIcon/Climate.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Climate",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Coffeemaker.vue b/assets/js/components/VehicleIcon/Coffeemaker.vue
index c68455500..6978d2954 100644
--- a/assets/js/components/VehicleIcon/Coffeemaker.vue
+++ b/assets/js/components/VehicleIcon/Coffeemaker.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Coffeemaker",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Compute.vue b/assets/js/components/VehicleIcon/Compute.vue
index 873f838da..953b09004 100644
--- a/assets/js/components/VehicleIcon/Compute.vue
+++ b/assets/js/components/VehicleIcon/Compute.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Compute",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Cooking.vue b/assets/js/components/VehicleIcon/Cooking.vue
index 0015a0957..09d7435a3 100644
--- a/assets/js/components/VehicleIcon/Cooking.vue
+++ b/assets/js/components/VehicleIcon/Cooking.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Cooking",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Cooler.vue b/assets/js/components/VehicleIcon/Cooler.vue
index 5144fd246..704660cd8 100644
--- a/assets/js/components/VehicleIcon/Cooler.vue
+++ b/assets/js/components/VehicleIcon/Cooler.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Cooler",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Desktop.vue b/assets/js/components/VehicleIcon/Desktop.vue
index f642b08e7..4069652cf 100644
--- a/assets/js/components/VehicleIcon/Desktop.vue
+++ b/assets/js/components/VehicleIcon/Desktop.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Desktop",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Device.vue b/assets/js/components/VehicleIcon/Device.vue
index 75b7b9b40..854b6bc11 100644
--- a/assets/js/components/VehicleIcon/Device.vue
+++ b/assets/js/components/VehicleIcon/Device.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Device",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Dishwasher.vue b/assets/js/components/VehicleIcon/Dishwasher.vue
index 0d472b911..c8fe658ad 100644
--- a/assets/js/components/VehicleIcon/Dishwasher.vue
+++ b/assets/js/components/VehicleIcon/Dishwasher.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Dishwasher",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Dryer.vue b/assets/js/components/VehicleIcon/Dryer.vue
index d04cf9117..8101da513 100644
--- a/assets/js/components/VehicleIcon/Dryer.vue
+++ b/assets/js/components/VehicleIcon/Dryer.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Dryer",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Floorlamp.vue b/assets/js/components/VehicleIcon/Floorlamp.vue
index c96055bea..fc759f373 100644
--- a/assets/js/components/VehicleIcon/Floorlamp.vue
+++ b/assets/js/components/VehicleIcon/Floorlamp.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Floorlamp",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Generic.vue b/assets/js/components/VehicleIcon/Generic.vue
index d7d5e7220..771279d62 100644
--- a/assets/js/components/VehicleIcon/Generic.vue
+++ b/assets/js/components/VehicleIcon/Generic.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Plug",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Heater.vue b/assets/js/components/VehicleIcon/Heater.vue
index b1130a27c..f1879281b 100644
--- a/assets/js/components/VehicleIcon/Heater.vue
+++ b/assets/js/components/VehicleIcon/Heater.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heater",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Heatexchange.vue b/assets/js/components/VehicleIcon/Heatexchange.vue
index bca74a38b..08da1d774 100644
--- a/assets/js/components/VehicleIcon/Heatexchange.vue
+++ b/assets/js/components/VehicleIcon/Heatexchange.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heatexchange",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Heatpump.vue b/assets/js/components/VehicleIcon/Heatpump.vue
index 1bf2bd54c..726709822 100644
--- a/assets/js/components/VehicleIcon/Heatpump.vue
+++ b/assets/js/components/VehicleIcon/Heatpump.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Heatpump",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Kettle.vue b/assets/js/components/VehicleIcon/Kettle.vue
index 452a29e28..93450a4eb 100644
--- a/assets/js/components/VehicleIcon/Kettle.vue
+++ b/assets/js/components/VehicleIcon/Kettle.vue
@@ -7,8 +7,9 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
 	name: "Kettle",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Laundry.vue b/assets/js/components/VehicleIcon/Laundry.vue
index 3d72f55df..b0788b2c9 100644
--- a/assets/js/components/VehicleIcon/Laundry.vue
+++ b/assets/js/components/VehicleIcon/Laundry.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Laundry",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Laundry2.vue b/assets/js/components/VehicleIcon/Laundry2.vue
index f22b386e6..8ffed99cd 100644
--- a/assets/js/components/VehicleIcon/Laundry2.vue
+++ b/assets/js/components/VehicleIcon/Laundry2.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Laundry2",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Machine.vue b/assets/js/components/VehicleIcon/Machine.vue
index 269c7740c..a54d1f902 100644
--- a/assets/js/components/VehicleIcon/Machine.vue
+++ b/assets/js/components/VehicleIcon/Machine.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Machine",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Meter.vue b/assets/js/components/VehicleIcon/Meter.vue
index f2d099ebb..0759fd354 100644
--- a/assets/js/components/VehicleIcon/Meter.vue
+++ b/assets/js/components/VehicleIcon/Meter.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Meter",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Microwave.vue b/assets/js/components/VehicleIcon/Microwave.vue
index c55624df6..2e81cd9c2 100644
--- a/assets/js/components/VehicleIcon/Microwave.vue
+++ b/assets/js/components/VehicleIcon/Microwave.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Microwave",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Moped.vue b/assets/js/components/VehicleIcon/Moped.vue
index 1a5c9299f..47199ce4e 100644
--- a/assets/js/components/VehicleIcon/Moped.vue
+++ b/assets/js/components/VehicleIcon/Moped.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Moped",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Motorcycle.vue b/assets/js/components/VehicleIcon/Motorcycle.vue
index 52216466a..0e2bc6334 100644
--- a/assets/js/components/VehicleIcon/Motorcycle.vue
+++ b/assets/js/components/VehicleIcon/Motorcycle.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Motorcycle",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Pump.vue b/assets/js/components/VehicleIcon/Pump.vue
index 6bbf4b13f..df4475ba5 100644
--- a/assets/js/components/VehicleIcon/Pump.vue
+++ b/assets/js/components/VehicleIcon/Pump.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Pump",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Rickshaw.vue b/assets/js/components/VehicleIcon/Rickshaw.vue
index 6de4410e8..b4a8e2926 100644
--- a/assets/js/components/VehicleIcon/Rickshaw.vue
+++ b/assets/js/components/VehicleIcon/Rickshaw.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Rickshaw",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Rocket.vue b/assets/js/components/VehicleIcon/Rocket.vue
index 7be8f75aa..c4c79dccc 100644
--- a/assets/js/components/VehicleIcon/Rocket.vue
+++ b/assets/js/components/VehicleIcon/Rocket.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Rocket",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Scooter.vue b/assets/js/components/VehicleIcon/Scooter.vue
index 3de0d4078..fdeda5860 100644
--- a/assets/js/components/VehicleIcon/Scooter.vue
+++ b/assets/js/components/VehicleIcon/Scooter.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Scooter",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Shuttle.vue b/assets/js/components/VehicleIcon/Shuttle.vue
index 14d779341..98f852916 100644
--- a/assets/js/components/VehicleIcon/Shuttle.vue
+++ b/assets/js/components/VehicleIcon/Shuttle.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Shuttle",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/SmartConsumer.vue b/assets/js/components/VehicleIcon/SmartConsumer.vue
index f79989f63..40118da87 100644
--- a/assets/js/components/VehicleIcon/SmartConsumer.vue
+++ b/assets/js/components/VehicleIcon/SmartConsumer.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "SmartConsumer",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Taxi.vue b/assets/js/components/VehicleIcon/Taxi.vue
index 350851203..4e72d3df1 100644
--- a/assets/js/components/VehicleIcon/Taxi.vue
+++ b/assets/js/components/VehicleIcon/Taxi.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Taxi",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Tool.vue b/assets/js/components/VehicleIcon/Tool.vue
index f240984ee..b387edfbb 100644
--- a/assets/js/components/VehicleIcon/Tool.vue
+++ b/assets/js/components/VehicleIcon/Tool.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Tool",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Tractor.vue b/assets/js/components/VehicleIcon/Tractor.vue
index 058466274..31118b4f7 100644
--- a/assets/js/components/VehicleIcon/Tractor.vue
+++ b/assets/js/components/VehicleIcon/Tractor.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Tractor",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/Van.vue b/assets/js/components/VehicleIcon/Van.vue
index a45449025..d357972f4 100644
--- a/assets/js/components/VehicleIcon/Van.vue
+++ b/assets/js/components/VehicleIcon/Van.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "Van",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/VehicleIcon.stories.js b/assets/js/components/VehicleIcon/VehicleIcon.stories.js
deleted file mode 100644
index 90fa7ed44..000000000
--- a/assets/js/components/VehicleIcon/VehicleIcon.stories.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import VehicleIcon from "./VehicleIcon.vue";
-
-const icons = [
-  "car",
-  "bike",
-  "bus",
-  "moped",
-  "motorcycle",
-  "rocket",
-  "scooter",
-  "taxi",
-  "tractor",
-  "rickshaw",
-  "shuttle",
-  "van",
-  "airpurifier",
-  "battery",
-  "bulb",
-  "climate",
-  "coffeemaker",
-  "compute",
-  "cooking",
-  "cooler",
-  "desktop",
-  "device",
-  "dishwasher",
-  "dryer",
-  "floorlamp",
-  "generic",
-  "heater",
-  "heatexchange",
-  "heatpump",
-  "kettle",
-  "laundry",
-  "laundry2",
-  "machine",
-  "meter",
-  "smartconsumer",
-  "microwave",
-  "pump",
-  "tool",
-  "waterheater",
-];
-
-export default {
-  title: "VehicleIcon/VehicleIcon",
-  component: VehicleIcon,
-  argTypes: {
-    name: {
-      control: "select",
-      options: icons,
-    },
-    names: { control: "object" },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      defaultValue: "xl",
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { VehicleIcon },
-  setup() {
-    return { args };
-  },
-  template: '<VehicleIcon v-bind="args" />',
-});
-
-// Single icon story that can be controlled via args
-export const SingleIcon = Template.bind({});
-SingleIcon.args = {
-  name: "car",
-  size: "xl",
-};
-
-// Multiple icons stories
-export const TwoCars = Template.bind({});
-TwoCars.args = {
-  names: ["car", "car"],
-  size: "xl",
-};
-
-export const CarAndThreeBikes = Template.bind({});
-CarAndThreeBikes.args = {
-  names: ["car", "bike", "bike", "bike"],
-  size: "xl",
-};
-
-// Story showing all icons at once
-export const AllIcons = () => ({
-  components: { VehicleIcon },
-  setup() {
-    return { icons };
-  },
-  template: `
-    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px;">
-      <div v-for="icon in icons" :key="icon" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
-        <VehicleIcon :name="icon" size="xl" />
-        <small>{{ icon }}</small>
-      </div>
-    </div>
-  `,
-});
diff --git a/assets/js/components/VehicleIcon/VehicleIcon.stories.ts b/assets/js/components/VehicleIcon/VehicleIcon.stories.ts
new file mode 100644
index 000000000..998e594f0
--- /dev/null
+++ b/assets/js/components/VehicleIcon/VehicleIcon.stories.ts
@@ -0,0 +1,106 @@
+import { ICON_SIZE } from "@/types/evcc";
+import VehicleIcon from "./VehicleIcon.vue";
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+const icons = [
+	"car",
+	"bike",
+	"bus",
+	"moped",
+	"motorcycle",
+	"rocket",
+	"scooter",
+	"taxi",
+	"tractor",
+	"rickshaw",
+	"shuttle",
+	"van",
+	"airpurifier",
+	"battery",
+	"bulb",
+	"climate",
+	"coffeemaker",
+	"compute",
+	"cooking",
+	"cooler",
+	"desktop",
+	"device",
+	"dishwasher",
+	"dryer",
+	"floorlamp",
+	"generic",
+	"heater",
+	"heatexchange",
+	"heatpump",
+	"kettle",
+	"laundry",
+	"laundry2",
+	"machine",
+	"meter",
+	"smartconsumer",
+	"microwave",
+	"pump",
+	"tool",
+	"waterheater",
+];
+
+export default {
+	title: "VehicleIcon/VehicleIcon",
+	component: VehicleIcon,
+	argTypes: {
+		name: {
+			control: "select",
+			options: icons,
+		},
+		names: { control: "object" },
+		size: {
+			control: "select",
+			options: Object.values(ICON_SIZE),
+			defaultValue: ICON_SIZE.XL,
+		},
+	},
+} as Meta<typeof VehicleIcon>;
+
+const Template: StoryFn<typeof VehicleIcon> = (args) => ({
+	components: { VehicleIcon },
+	setup() {
+		return { args };
+	},
+	template: '<VehicleIcon v-bind="args" />',
+});
+
+// Single icon story that can be controlled via args
+export const SingleIcon = Template.bind({});
+SingleIcon.args = {
+	name: "car",
+	size: ICON_SIZE.XL,
+};
+
+// Multiple icons stories
+export const TwoCars = Template.bind({});
+TwoCars.args = {
+	names: ["car", "car"],
+	size: ICON_SIZE.XL,
+};
+
+export const CarAndThreeBikes = Template.bind({});
+CarAndThreeBikes.args = {
+	names: ["car", "bike", "bike", "bike"],
+	size: ICON_SIZE.XL,
+};
+
+// Story showing all icons at once
+export const AllIcons = () => ({
+	components: { VehicleIcon },
+	setup() {
+		return { icons };
+	},
+	template: `
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px;">
+      <div v-for="icon in icons" :key="icon" style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
+        <VehicleIcon :name="icon" size="xl" />
+        <small>{{ icon }}</small>
+      </div>
+    </div>
+  `,
+});
diff --git a/assets/js/components/VehicleIcon/VehicleIcon.vue b/assets/js/components/VehicleIcon/VehicleIcon.vue
index 3ce609b18..3d2dc3c35 100644
--- a/assets/js/components/VehicleIcon/VehicleIcon.vue
+++ b/assets/js/components/VehicleIcon/VehicleIcon.vue
@@ -3,7 +3,8 @@
 	<MultiIcon v-else :count="count" :size="size"></MultiIcon>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type Component, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/car3";
 import MultiIcon from "../MultiIcon";
 
@@ -45,8 +46,9 @@ import tool from "./Tool.vue";
 import tractor from "./Tractor.vue";
 import van from "./Van.vue";
 import waterheater from "./WaterHeater.vue";
+import { ICON_SIZE } from "@/types/evcc";
 
-const icons = {
+const icons: Record<string, Component | string> = {
 	airpurifier,
 	battery,
 	bike,
@@ -90,20 +92,20 @@ const icons = {
 
 export const ICONS = Object.keys(icons);
 
-export default {
+export default defineComponent({
 	name: "VehicleIcon",
 	components: { MultiIcon },
 	props: {
 		name: { type: String, default: "car" },
-		names: { type: Array },
-		size: { type: String, default: "s" },
+		names: { type: Array as PropType<string[]>, default: () => [] },
+		size: { type: String as PropType<ICON_SIZE>, default: ICON_SIZE.S },
 	},
 	computed: {
-		uniqueNames() {
-			return [...new Set(this.names || [this.name])];
+		uniqueNames(): string[] {
+			return [...new Set(this.names && this.names.length ? this.names : [this.name])];
 		},
 		count() {
-			return this.names?.length || 0;
+			return this.names.length;
 		},
 		single() {
 			return this.uniqueNames.length == 1;
@@ -112,7 +114,7 @@ export default {
 			return icons[this.uniqueNames[0]] || `shopicon-regular-car3`;
 		},
 	},
-};
+});
 </script>
 
 <style scoped>
diff --git a/assets/js/components/VehicleIcon/WaterHeater.vue b/assets/js/components/VehicleIcon/WaterHeater.vue
index 68800e77f..fc59ac689 100644
--- a/assets/js/components/VehicleIcon/WaterHeater.vue
+++ b/assets/js/components/VehicleIcon/WaterHeater.vue
@@ -7,8 +7,10 @@
 	</svg>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
 	name: "WaterHeater",
-};
+});
 </script>
diff --git a/assets/js/components/VehicleIcon/index.js b/assets/js/components/VehicleIcon/index.ts
similarity index 100%
rename from assets/js/components/VehicleIcon/index.js
rename to assets/js/components/VehicleIcon/index.ts
diff --git a/assets/js/types/evcc.ts b/assets/js/types/evcc.ts
index bd9fd3321..91b996544 100644
--- a/assets/js/types/evcc.ts
+++ b/assets/js/types/evcc.ts
@@ -54,6 +54,14 @@ export enum CURRENCY {
 	DKK = "DKK",
 }
 
+export enum ICON_SIZE {
+	XS = "xs",
+	S = "s",
+	M = "m",
+	L = "l",
+	XL = "xl",
+}
+
 export enum CHARGE_MODE {
 	OFF = "off",
 	NOW = "now",