diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index 9ec0d74..c74c5aa 100644 --- a/src/components/ControlMap.js +++ b/src/components/ControlMap.js @@ -3,6 +3,7 @@ import React from "react"; import { Map, ImageOverlay, Marker, LayersControl } from "react-leaflet"; import Leaflet from "leaflet"; import _ from "lodash"; +import parseIconName from "utils/parseIconName"; export type Point = [number, number]; @@ -44,10 +45,9 @@ export default class ControlMap extends React.Component { return _.map(this.props.controls, this.renderMarker.bind(this)); } - createLeafletIcon(iconRaw: string) { - const icon = iconRaw.split(" ").map(name => "mdi-".concat(name)).join(" "); + createLeafletIcon(icon: string) { return Leaflet.divIcon({ - className: `mdi mdi-36px ${icon}`, + className: parseIconName(`${icon} 36px`), iconSize: Leaflet.point(36, 36), iconAnchor: Leaflet.point(18, 18) }); diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 00f0c0d..2f095c3 100644 --- a/src/components/SideBar.js +++ b/src/components/SideBar.js @@ -8,6 +8,7 @@ import IconButton from "material-ui/IconButton"; import AppBar from "material-ui/AppBar"; import Toolbar from "material-ui/Toolbar"; import List from "material-ui/List"; +import { renderIcon } from "utils/parseIconName"; export type SideBarProps = { control: ?Control, @@ -27,6 +28,9 @@ class SideBar extends React.Component { return { drawerPaper: { width: 320 + }, + flex: { + flex: 1 } }; } @@ -45,12 +49,14 @@ class SideBar extends React.Component { > - - - - + {this.props.control == null + || renderIcon(this.props.control.icon, "mdi-36px")} + {this.props.control == null || this.props.control.name} + + +