Improve the entire icon logic

- Tree Shaking for Icons (Closes #53)
- New API for the config (See 
https://github.com/uwap/mqtt-control-map/wiki/Icons)
- Icons can now be colored everywhere, not just on the map

config/rzl/olymp.js

@@ -1,9 +1,10 @@
 // @flow
 import type { Topics, Controls } from "config/flowtypes";
-import { mdi } from "config/icon";
+import { svg } from "config/icon";
 import { hex, rainbow } from "config/colors";
 import * as types from "config/types";
 import { tasmota, esper } from "./utils";
+import * as icons from "@mdi/js"
 
 export const topics: Topics = {
   ...tasmota.topics("8", "ledOlymp"),
@@ -47,66 +48,63 @@ export const controls: Controls = {
   ledOlymp: {
     name: "LED Olymp",
     position: [196, 154],
-    icon: mdi("white-balance-iridescent rotate-45"),
-    iconColor: tasmota.iconColor("ledOlymp", rainbow),
+    icon: svg(icons.mdiWhiteBalanceIridescent).rotate(45).color(
+      tasmota.iconColor("ledOlymp", rainbow)),
     ui: [
       {
         type: "toggle",
         text: "LED Olymp",
         topic: "ledOlymp",
-        icon: mdi("power")
+        icon: svg(icons.mdiPower)
       }
     ]
   },
   videogames: {
     name: "Videospiele",
     position: [100, 100],
-    icon: mdi("gamepad-variant"),
-    iconColor: ({videogames}) =>
-      (videogames === "on" ? hex("#00FF00") : hex("#000000")),
+    icon: svg(icons.mdiGamepadVariant).color(({videogames}) =>
+      videogames === "on" ? hex("#00FF00") : hex("#000000")),
     ui: [
       {
         type: "toggle",
         text: "Videospiele",
         topic: "videogames",
-        icon: mdi("power")
+        icon: svg(icons.mdiPower)
       }
     ]
   },
   olympPC: {
     name: "Rechner",
     position: [297, 90],
-    icon: mdi("desktop-classic"),
-    iconColor: ({olympPC}) =>
-      (olympPC === "on" ? hex("#00FF00") : hex("#000000")),
+    icon: svg(icons.mdiDesktopClassic).color(({olympPC}) =>
+      olympPC === "on" ? hex("#00FF00") : hex("#000000")),
     ui: [
       {
         type: "toggle",
         text: "Rechner",
         topic: "olympPC",
-        icon: mdi("power")
+        icon: svg(icons.mdiPower)
       }
     ]
   },
   rundumleuchte: {
     name: "Rundumleuchte",
     position: [310, 275],
-    icon: mdi("alarm-light"),
-    iconColor: ({rundumleuchte}) =>
-      (rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
+    icon: svg(icons.mdiAlarmLight).color(({rundumleuchte}) =>
+      rundumleuchte === "on" ? hex("#F0DF10") : hex("#000000")),
     ui: [
       {
         type: "toggle",
         text: "Rundumleuchte",
         topic: "rundumleuchte",
-        icon: mdi("power")
+        icon: svg(icons.mdiPower)
       }
     ]
   },
   alarm: {
     name: "Alarm",
     position: [340, 250],
-    icon: mdi("alarm-bell"),
+    icon: svg(icons.mdiAlarmBell),
     iconColor: () => hex("#000000"),
     ui: esper.statistics("alarm")
   }