From 856aab41ad0ff1d7b44c4480649095b45b11346c Mon Sep 17 00:00:00 2001 From: uwap Date: Thu, 8 Oct 2020 08:36:56 +0200 Subject: [PATCH] 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/entropia/index.js | 10 +-- config/rzl/index.js | 150 ++++++++++++++++----------------- config/rzl/kitchen.js | 49 +++++------ config/rzl/olymp.js | 32 ++++--- config/rzl/onkyo.js | 17 ++-- config/rzl/utils.js | 13 +-- config/uwap-home/index.js | 126 +++++++++++++-------------- package.json | 3 +- src/components/App.js | 10 ++- src/components/ControlMap.js | 13 +-- src/components/SideBar.js | 6 +- src/components/TopBar.js | 4 +- src/components/UiItems/Link.js | 3 +- src/components/UiItems/base.js | 7 +- src/config/flowtypes.js | 1 - src/config/icon.js | 101 ++++++++++++++-------- src/index.jsx | 1 - yarn.lock | 11 ++- 18 files changed, 288 insertions(+), 269 deletions(-) diff --git a/config/entropia/index.js b/config/entropia/index.js index c3237a8..e28e63e 100644 --- a/config/entropia/index.js +++ b/config/entropia/index.js @@ -2,7 +2,8 @@ import type { Config } from "config/flowtypes"; import { hex } from "config/colors"; import * as types from "config/types"; -import { mdi } from "config/icon"; +import * as icons from "@mdi/js"; +import { svg } from "config/icon"; const config: Config = { space: { @@ -32,20 +33,19 @@ const config: Config = { hauptraumTableLight: { name: "Hauptraum Tisch", position: [450, 450], - icon: mdi("white-balance-iridescent"), - iconColor: () => hex("#000000"), + icon: svg(icons.mdiWhiteBalanceIridescent), ui: [ { type: "toggle", text: "Licht", topic: "hauptraumTableLight", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "toggle", text: "Licht", topic: "hauptraumTableLightOnHack", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] } diff --git a/config/rzl/index.js b/config/rzl/index.js index f084566..dd5bebf 100644 --- a/config/rzl/index.js +++ b/config/rzl/index.js @@ -2,8 +2,9 @@ import type { Config } from "config/flowtypes"; import * as types from "config/types"; import { hex, rainbow } from "config/colors"; -import { mdi, rawMdi } from "config/icon"; +import { svg, withState } from "config/icon"; import { esper, tasmota } from "./utils"; +import * as icons from "@mdi/js" import * as onkyo from "./onkyo"; import * as olymp from "./olymp"; @@ -275,29 +276,28 @@ const config: Config = { ledStahltrager: { name: "LED Stahlträger", position: [340, 590], - icon: mdi("white-balance-iridescent"), - iconColor: ({ledStahltraeger}) => - (ledStahltraeger === "on" ? rainbow : hex("#000000")), + icon: svg(icons.mdiWhiteBalanceIridescent).color(({ledStahltraeger}) => + ledStahltraeger === "on" ? rainbow : hex("#000000")), ui: [ { type: "toggle", text: "Stahlträger LED", topic: "ledStahltraeger", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, snackbar: { name: "Snackbar", position: [510, 500], - icon: mdi("fridge"), - iconColor: tasmota.iconColor("snackbar", hex("#E20074")), + icon: svg(icons.mdiFridge).color( + tasmota.iconColor("snackbar", hex("#E20074"))), ui: [ { type: "toggle", text: "Snackbar", topic: "snackbar", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "section", @@ -307,7 +307,7 @@ const config: Config = { type: "text", text: "LED-Streifen", topic: "snackbarLedOnline", - icon: mdi("white-balance-iridescent") + icon: svg(icons.mdiWhiteBalanceIridescent) }, { type: "dropDown", @@ -326,7 +326,7 @@ const config: Config = { "11": "Rainbow Pattern", "12": "Fire Pattern" }, - icon: mdi("settings"), + icon: svg(icons.mdiCog), enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" }, { @@ -335,7 +335,7 @@ const config: Config = { topic: "snackbarDimmmer", min: 0, max: 100, - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" }, { @@ -344,7 +344,7 @@ const config: Config = { topic: "snackbarSpeed", min: 0, max: 20, - icon: mdi("speedometer"), + icon: svg(icons.mdiSpeedometer), enableCondition: ({ snackbarLedOnline }) => snackbarLedOnline === "on" } ] @@ -352,155 +352,151 @@ const config: Config = { twinkle: { name: "Twinkle", position: [530, 560], - icon: ({twinkle}) => - (twinkle === "on" ? rawMdi("led-on flip-v") : rawMdi("led-off flip-v")), - iconColor: ({twinkle}) => (twinkle === "on" ? rainbow : hex("#000000")), + icon: withState(({twinkle}) => + twinkle === "on" ? svg(icons.mdiLedOn).flipV().color(rainbow) + : svg(icons.mdiLedOff).flipV() + ), ui: [ { type: "toggle", text: "Twinkle", topic: "twinkle", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, fan: { name: "Ventilator", position: [530, 440], - icon: mdi("fan"), - iconColor: ({fan}) => (fan === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiFan).color(({fan}) => + fan === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", text: "Ventilator", topic: "fan", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, cashdesk: { name: "Cashdesk", position: [510, 467], - icon: mdi("coin"), + icon: svg(icons.mdiCurrencyUsdCircle), ui: [ { type: "link", link: "http://cashdesk.rzl:8000/", text: "Open Cashdesk", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] }, flyfry: { name: "Fliegenbratgerät", position: [450, 570], - icon: mdi("fire"), - iconColor: ({flyfry}) => - (flyfry === "on" ? hex("#6666FF") : hex("#000000")), + icon: svg(icons.mdiFire).color(({flyfry}) => + flyfry === "on" ? hex("#6666FF") : hex("#000000")), ui: esper.statistics("flyfry", [ { type: "toggle", text: "Fliegenbratgerät", topic: "flyfry", - icon: mdi("power") + icon: svg(icons.mdiPower) } ]) }, projector: { name: "Beamer", position: [380, 590], - icon: mdi("projector flip-v"), - iconColor: ({projector}) => + icon: svg(icons.mdiProjector).flipV().color(({projector}) => ({ transientOn: hex("#b3b300"), transientOff: hex("#b3b300"), on: hex("#00ff00"), off: hex("#000000"), unknown: hex("#888888") - })[projector], + })[projector]), ui: [ { type: "toggle", text: "Beamer", topic: "projector", toggled: (val) => val === "transientOn" || val === "on", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, loetarbeitsplatz4: { name: "Lötarbeitsplatz", position: [205, 455], - icon: mdi("eyedropper-variant"), - iconColor: ({loetarbeitsplatz4}) => - (loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")), + icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) => + loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")), ui: [ { type: "text", text: "Status", topic: "loetarbeitsplatz4", - icon: mdi("eyedropper-variant") + icon: svg(icons.mdiEyedropperVariant) } ] }, loetarbeitsplatz5: { name: "Lötarbeitsplatz", position: [205, 405], - icon: mdi("eyedropper-variant"), - iconColor: ({loetarbeitsplatz5}) => - (loetarbeitsplatz5 === "on" ? hex("#FF0000") : hex("#000000")), + icon: svg(icons.mdiEyedropperVariant).color(({loetarbeitsplatz4}) => + loetarbeitsplatz4 === "on" ? hex("#FF0000") : hex("#000000")), ui: [ { type: "text", text: "Status", topic: "loetarbeitsplatz5", - icon: mdi("eyedropper-variant") + icon: svg(icons.mdiEyedropperVariant) } ] }, door: { name: "Tür", position: [455, 350], - icon: mdi("swap-vertical"), - iconColor: ({doorStatus}) => - (doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")), + icon: svg(icons.mdiSwapVertical).color(({doorStatus}) => + doorStatus === "on" ? hex("#00FF00") : hex("#FF0000")), ui: [ { type: "link", link: "http://s.rzl.so", text: "Open Status Page", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) }, { type: "link", // eslint-disable-next-line max-len link: "http://kunterbunt.vm.rzl/dashboard/db/allgemeines-copy-ranlvor?orgId=1", text: "RZL-Dashboard", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) }, { type: "text", text: "Anwesend", topic: "presenceStatus", - icon: mdi("account") + icon: svg(icons.mdiAccount) }, { type: "text", text: "Devices", topic: "devicesStatus", - icon: mdi("wifi") + icon: svg(icons.mdiWifi) }, { type: "toggle", text: "Deko", topic: "deko", - icon: mdi("invert-colors") + icon: svg(icons.mdiInvertColors) }, { type: "text", text: "Power Hauptraum", topic: "powerConsumption", - icon: mdi("speedometer") + icon: svg(icons.mdiSpeedometer) } ] @@ -508,56 +504,56 @@ const config: Config = { infoscreen: { name: "Infoscreen", position: [255, 495], - icon: mdi("television-guide flip-v"), - iconColor: tasmota.iconColor("infoscreen", hex("#4444FF")), + icon: svg(icons.mdiTelevisionGuide).flipV().color( + tasmota.iconColor("infoscreen", hex("#4444FF")) + ), ui: [ { type: "toggle", text: "Infoscreen", topic: "infoscreen", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "link", link: "http://cashdesk.rzl:3030/rzl", text: "Open Infoscreen", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] }, pilze: { name: "Pilze", position: [48, 499], - icon: ({pilze}) => - (pilze === "on" ? rawMdi("led-on") : rawMdi("led-off")), - iconColor: tasmota.iconColor("pilze", rainbow), + icon: withState(({pilze}) => + pilze === "on" ? svg(icons.mdiLedOn) : svg(icons.mdiLedOff)).color( + tasmota.iconColor("pilze", rainbow)), ui: [ { type: "toggle", text: "Pilze", topic: "pilze", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, printer3D: { name: "Ultimaker 3", position: [754, 560], - icon: mdi("printer-3d"), - iconColor: ({printer3DStatus}) => + icon: svg(icons.mdiPrinter3d).color(({printer3DStatus}) => ({ awaitingInteraction: hex("#b3b300"), printing: hex("#00ff00"), idle: hex("#000000"), unavailable: hex("#888888"), error: hex("#ff0000") - })[printer3DStatus], + })[printer3DStatus]), ui: [ { type: "link", link: "http://ultimaker.rzl/", text: "Open Webinterface", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) }, { type: "section", @@ -565,7 +561,7 @@ const config: Config = { }, { type: "progress", - icon: mdi("rotate-right"), + icon: svg(icons.mdiRotateRight), min: 0, max: 1, text: "Printing Progress", @@ -574,7 +570,7 @@ const config: Config = { { type: "text", text: "Time Left", - icon: mdi("clock"), + icon: svg(icons.mdiClock), topic: "printer3Dremaining" } ] @@ -582,47 +578,45 @@ const config: Config = { partkeepr: { name: "Partkeepr", position: [48, 450], - icon: mdi("chip"), + icon: svg(icons.mdiChip), ui: [ { type: "link", link: "http://partkeepr.rzl/", text: "Open Partkeepr", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] }, printerAnnette: { name: "Drucker", position: [800, 350], - icon: mdi("printer"), - iconColor: tasmota.iconColor("printerAnnette"), + icon: svg(icons.mdiPrinter).color(tasmota.iconColor("printerAnnette")), ui: [ { type: "toggle", text: "Drucker", topic: "printerAnnette", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "link", link: "http://annette.rzl/", text: "Open Annette", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] }, nebenraumPowerStatus: { name: "Strom Fablab", position: [613, 537], - icon: ({nebenraumPowerStatus}) => - (nebenraumPowerStatus === "on" ? rawMdi("flash") : rawMdi("flash-off")), - iconColor: ({nebenraumPowerStatus}) => - (nebenraumPowerStatus === "on" ? hex("#00ff00") : hex("#000000")), + icon: withState(({nebenraumPowerStatus}) => + nebenraumPowerStatus === "on" ? svg(icons.mdiFlash).color(hex("#00FF00")) + : svg(icons.mdiFlashOff)), ui: [ { type: "text", - icon: mdi("power"), + icon: svg(icons.mdiPower), text: "Strom Fablab", topic: "nebenraumPowerStatus" } @@ -631,19 +625,19 @@ const config: Config = { whirlpool: { name: "Vorstandswhirlpool", position: [1413, 500], - icon: mdi("pool"), - iconColor: ({whirlpoolBubbles}) => - (parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")), + icon: svg(icons.mdiPool).color( + ({whirlpoolBubbles}) => + parseInt(whirlpoolBubbles, 10) > 0 ? hex("#00ff00") : hex("#000000")), ui: [ { type: "text", - icon: mdi("oil-temperature"), + icon: svg(icons.mdiOilTemperature), text: "Temperatur", topic: "whirlpoolTemperature" }, { type: "text", - icon: mdi("oil-temperature"), + icon: svg(icons.mdiOilTemperature), text: "Temperatur Sollwert", topic: "whirlpoolTemperatureSetpoint" }, @@ -652,7 +646,7 @@ const config: Config = { min: 4, max: 100, text: "Temperatur Sollwert", - icon: mdi("oil-temperature"), + icon: svg(icons.mdiOilTemperature), topic: "whirlpoolTemperatureSetpoint" }, { @@ -660,7 +654,7 @@ const config: Config = { min: 0, max: 9, text: "Bubbles", - icon: mdi("chart-bubble"), + icon: svg(icons.mdiChartBubble), topic: "whirlpoolBubbles" } ] diff --git a/config/rzl/kitchen.js b/config/rzl/kitchen.js index a98dee5..86c9558 100644 --- a/config/rzl/kitchen.js +++ b/config/rzl/kitchen.js @@ -1,9 +1,10 @@ // @flow import type { Topics, Controls } from "config/flowtypes"; -import { mdi, mdiBattery } from "config/icon"; +import { svg, mdiBattery } from "config/icon"; import { hex } from "config/colors"; import * as types from "config/types"; import { floalt, tradfri, tasmota } from "./utils"; +import * as icons from "@mdi/js" export const topics: Topics = { //Kuechen-Floalts @@ -65,7 +66,7 @@ export const controls: Controls = { kitchenLight: { name: "Deckenlicht Küche", position: [325, 407], - icon: mdi("ceiling-light"), + icon: svg(icons.mdiCeilingLight), ui: [ { type: "toggle", @@ -74,14 +75,14 @@ export const controls: Controls = { toggled: (n) => parseInt(n, 10) > 0, topic: "kitchenLightBrightness", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "kitchenLightBrightness" }, { @@ -89,7 +90,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: "kitchenLightColor" }, { @@ -101,7 +102,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65537") }, { @@ -109,7 +110,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65537") }, { @@ -121,7 +122,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65538") }, { @@ -129,7 +130,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65538") }, { @@ -141,7 +142,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65539") }, { @@ -149,7 +150,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65539") }, { @@ -161,7 +162,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65540") }, { @@ -169,7 +170,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65540") } ] @@ -177,7 +178,7 @@ export const controls: Controls = { kitchenSinkLight: { name: "Licht Spüle", position: [300, 345], - icon: mdi("wall-sconce-flat"), + icon: svg(icons.mdiWallSconceFlat), ui: [ { type: "toggle", @@ -186,14 +187,14 @@ export const controls: Controls = { toggled: (n) => parseInt(n, 10) > 0, topic: "kitchenSinkLightBrightness", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "kitchenSinkLightBrightness" } ] @@ -201,7 +202,7 @@ export const controls: Controls = { kitchenCounterLight: { name: "Deckenlicht Theke", position: [400, 440], - icon: mdi("ceiling-light"), + icon: svg(icons.mdiCeilingLight), ui: [ { type: "section", @@ -212,7 +213,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65544") }, { @@ -220,7 +221,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65544") }, { @@ -232,7 +233,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: floalt.brightness("65543") }, { @@ -240,7 +241,7 @@ export const controls: Controls = { min: 0, max: 100, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: floalt.color("65543") } ] @@ -248,21 +249,21 @@ export const controls: Controls = { lichtDunstabzug: { name: "Licht Dunstabzugshaube", position: [252, 405], - icon: mdi("ceiling-light"), + icon: svg(icons.mdiCeilingLight), iconColor: tasmota.iconColor("lichtDunstabzug"), ui: [ { type: "toggle", text: "Licht Dunstabzugshaube", topic: "lichtDunstabzug", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, remotes: { name: "Fernbedinungen", position: [400, 344], - icon: mdi("light-switch"), + icon: svg(icons.mdiLightSwitch), iconColor: (state) => //if any remote is low make icon red (["65536", "65542", "65546", "65547"] .some((x) => state[tradfri.remote.low(x)] === "true") diff --git a/config/rzl/olymp.js b/config/rzl/olymp.js index 02a2d50..40a158f 100644 --- a/config/rzl/olymp.js +++ b/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") } diff --git a/config/rzl/onkyo.js b/config/rzl/onkyo.js index 7d1e866..d1bca0a 100644 --- a/config/rzl/onkyo.js +++ b/config/rzl/onkyo.js @@ -1,8 +1,9 @@ // @flow import type { Topics, Controls } from "config/flowtypes"; -import { mdi } from "config/icon"; +import { svg } from "config/icon"; import { hex } from "config/colors"; import * as types from "config/types"; +import * as icons from "@mdi/js"; export const topics: Topics = { onkyoConnection: { @@ -132,12 +133,12 @@ export const controls: Controls = { iconColor: ({onkyoConnection, onkyoPower}) => (onkyoConnection !== "connected" ? hex("#888888") : (onkyoPower === "on" ? hex("#00FF00") : hex("#000000"))), - icon: mdi("audio-video"), + icon: svg(icons.mdiAudioVideo), ui: [ { type: "toggle", text: "Power", - icon: mdi("power"), + icon: svg(icons.mdiPower), topic: "onkyoPower", enableCondition: (state) => state.onkyoConnection === "connected" }, @@ -151,14 +152,14 @@ export const controls: Controls = { topic: "onkyoVolume", min: 0, max: 50, - icon: mdi("volume-high"), + icon: svg(icons.mdiVolumeHigh), enableCondition: (state) => state.onkyoConnection === "connected" }, { type: "toggle", text: "Mute", topic: "onkyoMute", - icon: mdi("volume-off"), + icon: svg(icons.mdiVolumeOff), enableCondition: (state) => state.onkyoConnection === "connected" }, { @@ -176,7 +177,7 @@ export const controls: Controls = { pult: "Pult", front: "Front HDMI" }, - icon: mdi("usb"), + icon: svg(icons.mdiUsb), enableCondition: (state) => state.onkyoConnection === "connected" }, { @@ -200,7 +201,7 @@ export const controls: Controls = { somafmChrismasLounge: "Christmas Lounge (SomaFM)", unknown: "Unknown" }, - icon: mdi("radio"), + icon: svg(icons.mdiRadio), enableCondition: (state) => state.onkyoConnection === "connected" && state.onkyoInputs === "netzwerk" }, @@ -212,7 +213,7 @@ export const controls: Controls = { type: "link", link: "http://mpd.rzl/mpd/player/index.php", text: "Open MPD Interface", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] } diff --git a/config/rzl/utils.js b/config/rzl/utils.js index 3ac8e49..5c5b195 100644 --- a/config/rzl/utils.js +++ b/config/rzl/utils.js @@ -1,8 +1,9 @@ // @flow import type { ControlUI, Topics } from "config/flowtypes"; -import { mdi } from "config/icon"; +import { svg } from "config/icon"; import { hex, type Color } from "config/colors"; import * as types from "config/types"; +import * as icons from "@mdi/js" export const tasmota = { topics: (id: string, name: string): Topics => ({ @@ -106,31 +107,31 @@ const esperStatistics = (name: string, { type: "text", text: "Device Variant", - icon: mdi("chart-donut"), + icon: svg(icons.mdiChartDonut), topic: `esper_${name}_device` }, { type: "text", text: "Version", - icon: mdi("source-branch"), + icon: svg(icons.mdiSourceBranch), topic: `esper_${name}_version` }, { type: "text", text: "IP", - icon: mdi("access-point-network"), + icon: svg(icons.mdiAccessPointNetwork), topic: `esper_${name}_ip` }, { type: "text", text: "RSSI", - icon: mdi("wifi"), + icon: svg(icons.mdiWifi), topic: `esper_${name}_rssi` }, { type: "text", text: "Running since…", - icon: mdi("av-timer"), + icon: svg(icons.mdiAvTimer), topic: `esper_${name}_uptime` } ]) diff --git a/config/uwap-home/index.js b/config/uwap-home/index.js index 05ec243..2cad6f3 100644 --- a/config/uwap-home/index.js +++ b/config/uwap-home/index.js @@ -1,8 +1,9 @@ // @flow import type { Config } from "config/flowtypes"; import * as types from "config/types"; -import { mdi, rawMdi } from "config/icon"; +import { svg, withState } from "config/icon"; import { hex } from "config/colors"; +import * as icons from "@mdi/js" const topicBulbHomeRust = (bulb: string, argument: string) => ({ [`${bulb}${argument}`]: { @@ -100,7 +101,7 @@ const sliderRGB = (bulb: string, argument: string) => ( min: 0, max: 255, text: argument, - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: `${bulb}${argument}` }] ); @@ -110,7 +111,7 @@ const sliderH = (bulb: string, argument: string) => ( min: 0, max: 360, text: argument, - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: `${bulb}${argument}` }] ); @@ -121,7 +122,7 @@ const sliderSVXY = (bulb: string, argument: string) => ( max: 1, step: 0.01, text: argument, - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: `${bulb}${argument}` }] ); @@ -205,36 +206,35 @@ const config: Config = { bedroomLight: { name: "Schlafzimmer", position: [180, 130], - icon: mdi("ceiling-light"), - iconColor: ({bedroomState}) => - (bedroomState === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiCeilingLight).color(({bedroomState}) => + bedroomState === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "bedroomState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 255, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "bedroombrightness" }, { type: "toggle", topic: "bedroomWakeup", text: "Lichtwecker", - icon: mdi("weather-sunset-up") + icon: svg(icons.mdiWeatherSunsetUp) }, { type: "slider", min: 250, max: 454, text: "Farbtemperatur", - icon: mdi("weather-sunset-down"), + icon: svg(icons.mdiWeatherSunsetDown), topic: "bedroomcolor_temp" } ] @@ -242,26 +242,25 @@ const config: Config = { bedroomFan: { name: "Lüftung Schlafzimmer", position: [140, 25], - icon: mdi("fan"), - iconColor: ({fanBedroomState}) => - (fanBedroomState === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiFan).color(({fanBedroomState}) => + fanBedroomState === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "fanBedroomState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "toggle", topic: "fanBedroomAuto", text: "Automatik", - icon: mdi("air-conditioner") + icon: svg(icons.mdiAirConditioner) }, { type: "text", text: "Zieltemperatur", - icon: mdi("temperature-celsius"), + icon: svg(icons.mdiTemperatureCelsius), topic: "fanBedroomTarget" }, { @@ -270,7 +269,7 @@ const config: Config = { max: 25, step: 0.1, text: "Zieltemperatur", - icon: mdi("oil-temperature"), + icon: svg(icons.mdiOilTemperature), topic: "fanBedroomTarget" } ] @@ -278,24 +277,23 @@ const config: Config = { officeSpeaker: { name: "Lautsprecher", position: [245, 658], - icon: ({speakerOfficeState}) => - (speakerOfficeState === "on" ? rawMdi("volume-high") - : rawMdi("volume-off")), - iconColor: ({speakerOfficeState}) => - (speakerOfficeState === "on" ? hex("#00FF00") : hex("#000000")), + icon: withState(({speakerOfficeState}) => + speakerOfficeState !== "on" ? svg(icons.mdiVolumeOff) + : svg(icons.mdiVolumeHigh).color(hex("#00FF00")) + ), ui: [ { type: "toggle", topic: "speakerOfficeState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, officeFan: { name: "Lüftung Büro", position: [140, 658], - icon: mdi("fan"), + icon: svg(icons.mdiFan), iconColor: ({fanOfficeState}) => (fanOfficeState === "on" ? hex("#00FF00") : hex("#000000")), ui: [ @@ -303,18 +301,18 @@ const config: Config = { type: "toggle", topic: "fanOfficeState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "toggle", topic: "fanOfficeAuto", text: "Automatik", - icon: mdi("air-conditioner") + icon: svg(icons.mdiAirConditioner) }, { type: "text", text: "Zieltemperatur", - icon: mdi("temperature-celsius"), + icon: svg(icons.mdiTemperatureCelsius), topic: "fanOfficeTarget" }, { @@ -323,7 +321,7 @@ const config: Config = { max: 25, step: 0.1, text: "Zieltemperatur", - icon: mdi("oil-temperature"), + icon: svg(icons.mdiOilTemperature), topic: "fanOfficeTarget" } ] @@ -331,25 +329,24 @@ const config: Config = { tucana: { name: "tucana", position: [110, 658], - icon: mdi("desktop-tower"), - iconColor: ({tucanaPower}) => + icon: svg(icons.mdiDesktopTower).color(({tucanaPower}) => ({ "Link Down": hex("#888888"), "1000M": hex("#00ff00"), "10M": hex("#000000") - })[tucanaPower] || hex("#ff0000"), + })[tucanaPower] || hex("#ff0000")), ui: [ { type: "toggle", topic: "tucanaPower", text: "Einschalten", - icon: mdi("power"), + icon: svg(icons.mdiPower), on: "1000M" }, { type: "text", text: "Link Speed", - icon: mdi("ethernet"), + icon: svg(icons.mdiEthernet), topic: "tucanaPower" } ] @@ -357,19 +354,19 @@ const config: Config = { officeSwitch: { name: "Switch Büro", position: [200, 540], - icon: mdi("lan"), + icon: svg(icons.mdiLan), ui: [ { type: "toggle", topic: "officeSwitchPollingActive", text: "Poll switch status", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "link", link: "http://192.168.0.189/", text: "Open Webinterface", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] @@ -377,22 +374,21 @@ const config: Config = { officeLight: { name: "Büro", position: [210, 570], - icon: mdi("ceiling-light"), - iconColor: ({officeState}) => - (officeState === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiCeilingLight).color(({officeState}) => + officeState === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "officeState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 255, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "officebrightness" } ] @@ -400,22 +396,21 @@ const config: Config = { hallwayLight: { name: "Flur", position: [520, 370], - icon: mdi("ceiling-light"), - iconColor: ({hallwayState}) => - (hallwayState === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiCeilingLight).color(({hallwayState}) => + hallwayState === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "hallwayState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 255, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "hallwaybrightness" } ] @@ -423,22 +418,21 @@ const config: Config = { hallway2Light: { name: "Flur", position: [250, 370], - icon: mdi("ceiling-light"), - iconColor: ({hallway2State}) => - (hallway2State === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiCeilingLight).color(({hallway2State}) => + hallway2State === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "hallway2State", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "slider", min: 0, max: 255, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "hallway2brightness" } ] @@ -446,62 +440,60 @@ const config: Config = { pi: { name: "Pi", position: [550, 75], - icon: mdi("raspberrypi"), + icon: svg(icons.mdiRaspberryPi), ui: [ { type: "toggle", topic: "lueftenHint", text: "Lüften Erinnerung", - icon: mdi("fan") + icon: svg(icons.mdiFan) }, { type: "link", link: "http://192.168.0.12:3000/", text: "Grafana", - icon: mdi("open-in-new") + icon: svg(icons.mdiOpenInNew) } ] }, nas: { name: "NAS", position: [550, 100], - icon: mdi("nas"), - iconColor: ({nasPower}) => - (nasPower === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiNas).color(({nasPower}) => + nasPower === "on" ? hex("#00FF00") : hex("#000000")), ui: [ { type: "toggle", topic: "nasPower", text: "Einschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) } ] }, livingroomLight: { name: "Wohnzimmer", position: [450, 200], - icon: mdi("ceiling-light"), - iconColor: ({livingroomState}) => - (livingroomState === "on" ? hex("#00FF00") : hex("#000000")), + icon: svg(icons.mdiCeilingLight).color(({livingroomState}) => + livingroomState === "on" ? hex("#00FF00") : hex("#000000")), ui: ([ { type: "toggle", topic: "livingroomState", text: "Ein/Ausschalten", - icon: mdi("power") + icon: svg(icons.mdiPower) }, { type: "toggle", topic: "livingroomKodiControlled", text: "Kodi Einbindung", - icon: mdi("brightness-auto") + icon: svg(icons.mdiBrightnessAuto) }, { type: "slider", min: 0, max: 255, text: "Helligkeit", - icon: mdi("brightness-7"), + icon: svg(icons.mdiBrightness7), topic: "livingroombrightness" }, { @@ -510,7 +502,7 @@ const config: Config = { min: 300, step: -1, text: "Speed", - icon: mdi("speedometer"), + icon: svg(icons.mdiSpeedometer), topic: "livingroomanimation-speed" }, { @@ -525,7 +517,7 @@ const config: Config = { "3": "RGB Fade", "4": "Work" }, - icon: mdi("settings") + icon: svg(icons.mdiCog) }, { type: "section", diff --git a/package.json b/package.json index 5d60251..06aa0fb 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "@material-ui/core": "^4.11.0", "@material-ui/lab": "^4.0.0-alpha.56", - "@mdi/font": "^5.6.55", + "@mdi/react": "^1.4.0", "leaflet": "^1.5.1", "lodash-es": "^4.17.15", "mqtt": "^4.2.1", @@ -31,6 +31,7 @@ "@babel/preset-env": "^7.5.5", "@babel/preset-flow": "^7.0.0-rc.1", "@babel/preset-react": "^7.0.0-rc.1", + "@mdi/js": "^5.6.55", "babel-eslint": "^10.0.2", "babel-loader": "^8.0.6", "clean-webpack-plugin": "^3.0.0", diff --git a/src/components/App.js b/src/components/App.js index c6df8d1..f2e0d84 100644 --- a/src/components/App.js +++ b/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 { controlMap: React.Node @@ -171,7 +179,7 @@ class App extends React.PureComponent { 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 || } diff --git a/src/components/ControlMap.js b/src/components/ControlMap.js index 6532002..1fb8ebb 100644 --- a/src/components/ControlMap.js +++ b/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: `` + html: renderToString(control.icon.render(state)) }); }; diff --git a/src/components/SideBar.js b/src/components/SideBar.js index 2d4499c..7983133 100644 --- a/src/components/SideBar.js +++ b/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) => { - {props.icon == null || renderRawIcon(props.icon, "mdi-36px")} + {props.icon == null || props.icon} {props.control == null ? "" : props.control.name} diff --git a/src/components/TopBar.js b/src/components/TopBar.js index 8f9055e..50abfa1 100644 --- a/src/components/TopBar.js +++ b/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 (); + return (); } return ( diff --git a/src/components/UiItems/Link.js b/src/components/UiItems/Link.js index 506f86d..5592e85 100644 --- a/src/components/UiItems/Link.js +++ b/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) => ( diff --git a/src/components/UiItems/base.js b/src/components/UiItems/base.js index 2b7a5b9..4e55ffc 100644 --- a/src/components/UiItems/base.js +++ b/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 }) => ( - {item.icon == null || renderRawIcon(item.icon(state), "mdi-24px")} + {item.icon == null || item.icon.size(1).render(state)} ); const createHelpers = (item: T) => ({ Icon: IconHelper, - Label: (props) => ( - + Label: () => ( + ), Action: (props) => ( diff --git a/src/config/flowtypes.js b/src/config/flowtypes.js index f3fe9d3..b91eb02 100644 --- a/src/config/flowtypes.js +++ b/src/config/flowtypes.js @@ -100,7 +100,6 @@ export type Control = { name: string, position: [number, number], icon: Icon, - iconColor?: (state: State) => Color, ui: Array }; export type Controls = Map; diff --git a/src/config/icon.js b/src/config/icon.js index 6844980..55bdd4c 100644 --- a/src/config/icon.js +++ b/src/config/icon.js @@ -1,54 +1,85 @@ // @flow -import * as React from "react"; +import React from "react"; +import ReactIcon from "@mdi/react"; import ReactContext from "mqtt/context"; +import { hex, type Color } from "./colors" +import * as mdiIcons from "@mdi/js" -export opaque type RawIcon: string = string; - -export type Icon = (State) => RawIcon; - -export const rawMdi = (name: string): RawIcon => { - return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`; +export type Icon = { + render: (s: State) => React.Node, + size: (n: number) => Icon, + rotate: (n: number) => Icon, + flip: () => Icon, + flipV: () => Icon, + color: (c: Color | (State) => Color) => Icon }; -export const mdi = (icon: string) => () => rawMdi(icon); +type IconPropHelper = { + size?: number, + rotate?: number, + horizontal?: boolean, + vertical?: boolean, + color?: Color +}; -export const mdiBattery = (topic: string) => (state: State) => { +export const svg = (data: string, props?: IconPropHelper): Icon => { + const propColor = ((c: Color | (State) => Color) => (state: State) => { + if (typeof c === "function") { + return c(state); + } + return c; + })(props?.color ?? "black"); + return { + render: (state) => ( + + ), + size: (n: number) => svg(data, {...props, size: n}), + rotate: (n: number) => svg(data, {...props, rotate: n}), + flip: () => svg(data, {...props, horizontal: !props?.horizontal ?? true}), + flipV: () => svg(data, {...props, vertical: !props?.vertical ?? true}), + color: (c: Color | (State) => Color) => svg(data, {...props, color: c}) + }; +} + +export const withState = (f: (s: State) => Icon): Icon => { + return { + render: (state) => f(state).render(state), + size: () => withState(f), + rotate: () => withState(f), + flip: () => withState(f), + flipV: () => withState(f), + color: () => withState(f) + }; +} + +export const mdiBattery = (topic: string): Icon => withState((state) => { const rawval = state[topic]; const val = parseInt(rawval, 10); if (isNaN(val)) { - return rawMdi("battery-unknown"); + return svg(mdiIcons.mdiBatteryUnknown); } else if (val > 95) { - return rawMdi("battery"); + return svg(mdiIcons.mdiBattery); } else if (val > 85) { - return rawMdi("battery-90"); + return svg(mdiIcons.mdiBattery90); } else if (val > 75) { - return rawMdi("battery-80"); + return svg(mdiIcons.mdiBattery80); } else if (val > 65) { - return rawMdi("battery-70"); + return svg(mdiIcons.mdiBattery70); } else if (val > 55) { - return rawMdi("battery-60"); + return svg(mdiIcons.mdiBattery60); } else if (val > 45) { - return rawMdi("battery-50"); + return svg(mdiIcons.mdiBattery50); } else if (val > 35) { - return rawMdi("battery-40"); + return svg(mdiIcons.mdiBattery40); } else if (val > 25) { - return rawMdi("battery-30"); + return svg(mdiIcons.mdiBattery30); } else if (val > 15) { - return rawMdi("battery-20"); + return svg(mdiIcons.mdiBattery20); } - return rawMdi("battery-10"); -}; - -export const renderRawIcon = - (icon: RawIcon, extraClass?: string): React.Node => { - return ; - }; - -export const renderIcon = - (icon: Icon, extraClass?: string): React.Node => { - return ( - - {({state}) => renderRawIcon(icon(state), extraClass)} - - ); - }; + return svg(mdiIcons.mdiBattery10); +}); diff --git a/src/index.jsx b/src/index.jsx index 392f8e4..94341da 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -4,7 +4,6 @@ import ReactDOM from "react-dom"; import App from "components/App"; -import "../node_modules/@mdi/font/css/materialdesignicons.min.css"; import "../css/styles.css"; import type { Config } from "config/flowtypes"; diff --git a/yarn.lock b/yarn.lock index 4fe972b..73a8400 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1050,10 +1050,15 @@ prop-types "^15.7.2" react-is "^16.8.0" -"@mdi/font@^5.6.55": +"@mdi/js@^5.6.55": version "5.6.55" - resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.6.55.tgz#3536d7a7671eda9d5d9ba191b9fb9aceccc0a07e" - integrity sha512-6wWrpTXiv2wBtoCL+EJ9Xxfy6Tv6Q1KxmrX54/M23tBNmdGmh417y1tn327oXQxO1nq7BiHGAKkWQZ/GQPLTCA== + resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.6.55.tgz#d1e99da22c8d462c17d4c5b530a7d1b77e668230" + integrity sha512-FphEd6PTivVSfsxjRB/Z5sJhxUmxA0jL/+nEQmqk8Ok1miSnw92ibj4p1SPAmgnR8OFTNCkHX23AvlU8YZQb5A== + +"@mdi/react@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.4.0.tgz#7f6bad1bd8801226d0e5bad91659b215ce68a93f" + integrity sha512-OUH9RhfDJPhybQL3owwrSDIXz2yVKXg5lYeOZjyRCiT9wqywNK0FeYyDByOwNIZnnIQoQYmuSrMv+pOX0Uqkmw== "@octokit/auth-token@^2.4.0": version "2.4.2"