replaced mdi dependency with react-icons

Author: mac-s-g

package.json

@@ -31,7 +31,6 @@
     "flux": "^2.1.1",
     "html-webpack-plugin": "2.28.0",
     "ignore-styles": "^5.0.1",
-    "mdi": "^1.8.36",
     "mocha": "^2.4.5",
     "node-sass": "^3.8.0",
     "react": "^15.4.2",
@@ -40,6 +39,7 @@
     "react-css-themr": "2.0.0",
     "react-dom": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.6",
+    "react-icons": "^2.2.3",
     "react-style-proptype": "^2.0.1",
     "resolve-url-loader": "1.6.1",
     "sass-loader": "^4.0.0",

src/js/components/JsonObject.js

@@ -2,6 +2,9 @@ import React from "react";
 import {toType} from './../helpers/util';
 import JsonObject from './JsonObject';
 
+import CirclePlus from 'react-icons/lib/md/add-circle-outline';
+import CircleMinus from 'react-icons/lib/md/remove-circle-outline';
+
 const DEPTH_OFFSET = 1
 
 export default class extends React.Component {
@@ -38,14 +41,13 @@ export default class extends React.Component {
         const {depth, src, name, ...rest} = this.props;
         const {expanded} = this.state;
         const expanded_class = expanded ? "expanded" : "collapsed";
+
+        const expanded_icon = expanded ? <CircleMinus /> : <CirclePlus />;
+
         return (<div class="object-key-val">
             <div onClick={this.toggleExpanded} class="open-brace brace-row">
                 <div class={"icon-container " + expanded_class}>
-                    <i class={
-                        "mdi mdi-"
-                        + (expanded ? 'minus' : 'plus')
-                        + "-circle-outline"
-                    }></i>
+                    {expanded_icon /*mdi icon*/}
                 </div>
                 <div class="object-name">{
                     (name ? name : '')

src/js/index.js

@@ -4,8 +4,6 @@ import JsonObject from './components/JsonObject';
 //global style
 //TODO make this theme customizable
 require('./../style/app-globals.scss');
-//material design icons
-require("mdi/css/materialdesignicons.min.css");
 
 
 //forward src through to JsonObject component

src/style/app-globals.scss

@@ -11,16 +11,6 @@
             display: inline-block;
 
         }
-        // &:hover {
-        //     .mdi {
-        //         &.mdi-plus-circle-outline {
-        //             color: $magenta;
-        //         }
-        //         &.mdi-minus-circle-outline {
-        //             color: $green;
-        //         }
-        //     }
-        // }
 
         .icon-container {
             -webkit-transition: all 0.2s ease-out;
@@ -30,24 +20,16 @@
             transition: all 0.2s ease-out;
 
             &.expanded {
-                .mdi {
+                svg {
                     color: $cyan;
                 }
             }
             &.collapsed {
-                .mdi {
+                svg {
                     color: $magenta;
                 }
             }
 
-            .mdi {
-
-                &.mdi-plus-circle-outline {
-                }
-                &.mdi-minus-circle-outline {
-                }
-            }
-
         }
 
         .brace {