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

src/components/App.js

@@ -39,6 +39,14 @@ export type AppState = {
   error: ?string
 };
 
+/*
+const App = (props: AppProps) => {
+  const topics = Array.isArray(props.config.topics) ?
+      Object.assign({}, ...props.config.topics) : props.config.topics;
+  const [mqttConnected, setMqttConnected] = useState(false);
+};
+*/
+
 class App extends React.PureComponent<AppProps & Classes, AppState> {
   controlMap: React.Node
 
@@ -171,7 +179,7 @@ class App extends React.PureComponent<AppProps & Classes, AppState> {
           control={this.state.selectedControl}
           onCloseRequest={this.closeDrawer}
           icon={this.state.selectedControl == null ? null :
-            this.state.selectedControl.icon(this.state.mqttState)}
+            this.state.selectedControl.icon.render(this.state.mqttState)}
         >
           {this.state.selectedControl == null
             || <UiItemList controls={this.state.selectedControl.ui} />}

src/components/ControlMap.js

@@ -7,6 +7,7 @@ import filter from "lodash/filter";
 import reduce from "lodash/reduce";
 import MqttContext from "mqtt/context";
 import type { Controls, Control, UIControl, ControlUI } from "config/flowtypes";
+import { renderToString } from 'react-dom/server'
 
 export type Point = [number, number];
 
@@ -28,21 +29,11 @@ const center = (props: ControlMapProps): Point =>
     props.height / 2
   ]);
 
-const iconColor = (control: Control, state: State): string => {
-  if (control.iconColor != null) {
-    return control.iconColor(state);
-  }
-  return "#000";
-};
-
 const createLeafletIcon = (control: Control, state: State) => {
-  const icon = control.icon(state);
-  const iconClass = `${icon} mdi-36px`;
   return divIcon({
     iconSize: point(36, 36),
     iconAnchor: point(18, 18),
-    html: `<i class="${iconClass}"
-        style="line-height: 1; color: ${iconColor(control, state)}"></i>`
+    html: renderToString(control.icon.render(state))
   });
 };
 

src/components/SideBar.js

@@ -8,16 +8,14 @@ import IconButton from "@material-ui/core/IconButton";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import List from "@material-ui/core/List";
-import { renderRawIcon } from "config/icon";
 
-import type { RawIcon } from "config/icon";
 import type { Control } from "config/flowtypes";
 
 export type SideBarProps = {
   control: ?Control,
   open: boolean,
   onCloseRequest: () => void,
-  icon?: ?RawIcon,
+  icon?: ?React.Node,
   children?: React.Node
 };
 
@@ -43,7 +41,7 @@ const SideBar = (props: SideBarProps) => {
       <AppBar position="static">
         <Toolbar>
           <span>
-            {props.icon == null || renderRawIcon(props.icon, "mdi-36px")}
+            {props.icon == null || props.icon}
           </span>
           <Typography variant="subtitle1" className={classes.title}>
             {props.control == null ? "" : props.control.name}

src/components/TopBar.js

@@ -9,6 +9,8 @@ import { fade } from "@material-ui/core/styles/colorManipulator";
 import { makeStyles } from "@material-ui/core/styles";
 import Tooltip from "@material-ui/core/Tooltip";
 import IconButton from "@material-ui/core/IconButton";
+import ReactIcon from "@mdi/react";
+import { mdiMap } from "@mdi/js";
 
 export type TopBarProps = {
   connected: boolean,
@@ -21,7 +23,7 @@ export type SearchBarProps = {
 
 const renderConnectionIndicator = (connected: boolean) => {
   if (connected) {
-    return (<i style={{fontSize: 32}} className="mdi mdi-map"></i>);
+    return (<ReactIcon path={mdiMap} size={2} />);
   }
   return (
     <CircularProgress size={32} style={{color: "rgba(0, 0, 0, 0.54)"}} />

src/components/UiItems/Link.js

@@ -2,7 +2,6 @@
 import React from "react";
 import createComponent from "./base";
 import { isEnabled, isDisabled } from "./utils";
-import { renderRawIcon } from "config/icon";
 
 import type { UILink } from "config/flowtypes";
 
@@ -19,7 +18,7 @@ const Icon = ({item, state}) => {
   if (item.icon == null) {
     return false;
   }
-  return renderRawIcon(item.icon(state), "mdi-24px");
+  return item.icon.render(state);
 };
 
 const BaseComponent = (_h, item: UILink, state, _changeState) => (

src/components/UiItems/base.js

@@ -7,7 +7,6 @@ import ListItemText from "@material-ui/core/ListItemText";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 
 import throttle from "lodash/throttle";
-import { renderRawIcon } from "config/icon";
 import type { Icon } from "config/icon";
 
 export type Helpers = {
@@ -41,15 +40,15 @@ type SuperT = $ReadOnly<{ text: string }>;
 
 const IconHelper = ({item, state}: { item: { +icon?: Icon }, state: State }) =>
   ( <ListItemIcon>
-    {item.icon == null || renderRawIcon(item.icon(state), "mdi-24px")}
+    {item.icon == null || item.icon.size(1).render(state)}
   </ListItemIcon>
   );
 
 const createHelpers = <T: SuperT> (item: T) =>
   ({
     Icon: IconHelper,
-    Label: (props) => (
-      <ListItemText primary={item.text} {...props} />
+    Label: () => (
+      <ListItemText primary={item.text} />
     ),
     Action: (props) => (
       <ListItemSecondaryAction {...props} />