Replace Feather Icon package with React Icons (#97)

* Replace Feather Icon package with React Icons

Offer icons from a whole range of icon packages. Still includes Feather Icon, just a whole lot more.

* Restore box icon

* Update generated HTML with icon changes

Author: jarrodbell

gui/js/comp/ControlItem.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import { Button } from "./UiComponents";
-import { Upload } from "react-feather";
+import { FiUpload as Upload } from "react-icons/fi";
 
 import Dash from "../dashboard.json";
 import { binsize } from "./../functions/configHelpers";

gui/js/comp/FileListing.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import { Fetch, Flex, RedButton, Button, buttonStyle, cPrimary, Alert, Spinner } from "./UiComponents";
-import { File, Trash2, Download } from "react-feather";
+import { FiFile as File, FiTrash2 as Trash2, FiDownload as Download } from "react-icons/fi";
 
 import Config from "./../configuration.json";
 let loc;

gui/js/comp/FirmwarePage.js

@@ -5,7 +5,7 @@ import styled from "styled-components";
 
 import { FileListing } from "./FileListing";
 import { Card, Flex, cSecondary, Button, DisabledButton, Confirmation, Alert, Spinner} from "./UiComponents";
-import { Zap, Power } from "react-feather";
+import { FiZap as Zap, FiPower as Power } from "react-icons/fi";
 
 import Config from "./../configuration.json";
 let loc;

gui/js/comp/UiComponents.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { createGlobalStyle, css } from "styled-components";
 import { normalize } from "styled-normalize";
-import { Loader, Menu as MenuIcon } from "react-feather";
+import { FiLoader as Loader, FiMenu as MenuIcon } from "react-icons/fi";
 import PropTypes from "prop-types";
 
 export const cPrimary = "#0055ff"; 

gui/js/comp/WifiPage.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 import { Form, Button, Spinner, Confirmation } from "./UiComponents";
-import { Wifi, Lock, Server, CornerDownRight } from "react-feather";
+import { FiWifi as Wifi, FiLock as Lock, FiServer as Server, FiCornerDownRight as CornerDownRight } from "react-icons/fi";
 
 import Config from "./../configuration.json";
 let loc;

gui/js/index.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
 import {BrowserRouter, Switch, Route, NavLink} from "react-router-dom";
-import { Box } from "react-feather";
+import { FiBox as HeaderIcon } from "react-icons/fi";
 
 import {GlobalStyle, Menu, Header, Page, Hamburger} from "./comp/UiComponents";
 import { WifiPage } from "./comp/WifiPage";
@@ -71,7 +71,7 @@ function Root() {
         <BrowserRouter>
 
             <Header>
-                <h1><Box style={{verticalAlign:"-0.1em"}} /> {projectName} {projectVersion}</h1>
+                <h1><HeaderIcon style={{verticalAlign:"-0.1em"}} /> {projectName} {projectVersion}</h1>
 
                 <Hamburger onClick={() => setMenu(!menu)} />
                 <Menu className={menu ? "" : "menuHidden"}>

package-lock.json

@@ -36,7 +36,7 @@
     "history": "^4.10.1",
     "preact": "^10.4.0",
     "prop-types": "^15.7.2",
-    "react-feather": "^2.0.4",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.1.2",
     "react-vis": "^1.11.7",
     "styled-components": "^5.1.0",