From d4c6ab7eb59788e1765e36ea2edd0d7970c7b45c Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Wed, 15 May 2024 21:59:25 +0200
Subject: [PATCH] UI: higher precision battery icon (#13909)

---
 .../js/components/Energyflow/BatteryIcon.vue  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/assets/js/components/Energyflow/BatteryIcon.vue b/assets/js/components/Energyflow/BatteryIcon.vue
index c3199d8c4..cc961ec68 100644
--- a/assets/js/components/Energyflow/BatteryIcon.vue
+++ b/assets/js/components/Energyflow/BatteryIcon.vue
@@ -1,13 +1,15 @@
 <template>
-	<component :is="`shopicon-regular-${icon}`"></component>
+	<svg :style="svgStyle" viewBox="0 0 48 48">
+		<path d="M0-.004h48v48H0v-48z" fill="none" />
+		<path
+			d="M35 9.996h-3v-4a2 2 0 00-2-2H18a2 2 0 00-2 2v4h-3a2 2 0 00-2 2v30a2 2 0 002 2h22a2 2 0 002-2v-30a2 2 0 00-2-2zm-15-2h8v2h-8v-2zm13 32H15v-26h18v26z"
+		/>
+		<path :d="socRect" />
+	</svg>
 </template>
 
 <script>
-import "@h2d2/shopicons/es/regular/batteryfull";
-import "@h2d2/shopicons/es/regular/batterythreequarters";
-import "@h2d2/shopicons/es/regular/batteryhalf";
-import "@h2d2/shopicons/es/regular/batteryquarter";
-import "@h2d2/shopicons/es/regular/batteryempty";
+import icon from "../../mixins/icon";
 
 export default {
 	name: "BatteryIcon",
@@ -15,13 +17,11 @@ export default {
 		soc: { type: Number, default: 0 },
 	},
 	computed: {
-		icon: function () {
-			if (this.soc > 80) return "batteryfull";
-			if (this.soc > 60) return "batterythreequarters";
-			if (this.soc > 40) return "batteryhalf";
-			if (this.soc > 20) return "batteryquarter";
-			return "batteryempty";
+		socRect() {
+			const height = (this.soc / (100 / 22)).toFixed(2);
+			return `M30 38H18v-${height}h12v${height}z`;
 		},
 	},
+	mixins: [icon],
 };
 </script>