moar stuff.

frontend/src/lib/components/DeviceIcon.svelte

@@ -12,11 +12,11 @@
   import hue_adore_tube from "./icons/hue_adore_tube.svg?raw";
   import hue_playbar from "./icons/hue_playbar.svg?raw";
   import hue_go from "./icons/hue_go.svg?raw";
-  import square from "./icons/square.svg?raw";
-  import hexagon from "./icons/hexagon.svg?raw";
-  import triangle from "./icons/triangle.svg?raw";
+  import shape_square from "./icons/shape_square.svg?raw";
+  import shape_hexagon from "./icons/shape_hexagon.svg?raw";
+  import shape_triangle from "./icons/shape_triangle.svg?raw";
 
-  export const iconMap = Object.seal({
+  export const deviceIconMap = Object.seal({
     generic_lamp,
     generic_boob,
     generic_ball,
@@ -29,13 +29,15 @@
     hue_lightbulb_gu10,
     hue_adore_tube,
     hue_playbar,
-    square,
-    hexagon,
-    triangle,
+    shape_square,
+    shape_hexagon,
+    shape_triangle,
     hue_go,
   });
 
-  export type IconName = keyof typeof iconMap;
+  export const deviceIconList = Object.seal(Object.keys(deviceIconMap).sort()) as DeviceIconName[];
+
+  export type DeviceIconName = keyof typeof deviceIconMap;
 </script>
 
 <script lang="ts">
@@ -44,7 +46,7 @@
 
   export let brightColor: ColorRGB;
   export let darkColor: ColorRGB;
-  export let name: IconName;
+  export let name: DeviceIconName;
 
   let gandalf: string;
   let voldemort: string;
@@ -52,7 +54,7 @@
   $: voldemort = rgbToHex(darkColor);
 
   let icon: string;
-  $: icon = iconMap[name] || iconMap.generic_lamp;
+  $: icon = deviceIconMap[name] || deviceIconMap.generic_lamp;
 
   let dataUrl: string;
   $: {