feat(controls): add icons #8

package.json

@@ -36,6 +36,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-uglify": "^6.0.3",
     "rollup-plugin-visualizer": "^2.6.0",
     "start-server-and-test": "^1.10.4",

rollup.config.js

@@ -5,6 +5,8 @@ import postcss from 'rollup-plugin-postcss';
 import bundleSize from 'rollup-plugin-bundle-size';
 import visualizer from 'rollup-plugin-visualizer';
 import { uglify } from 'rollup-plugin-uglify';
+import svg from 'rollup-plugin-svg'
+
 
 import pkg from './package.json';
 
@@ -41,6 +43,7 @@ export default [{
 		commonjs({
 			include: /node_modules/
 		}),
+		svg(),
 		visualizer(),
 		isProd && uglify()
 	]}

src/plugins/Controls/index.js

@@ -2,6 +2,9 @@ import React from 'react';
 import classnames from 'classnames';
 
 import { fitView, zoomIn, zoomOut } from '../../utils/graph';
+import plusIcon from '../../../assets/icons/plus.svg';
+import minusIcon from '../../../assets/icons/minus.svg';
+import fitviewIcon from '../../../assets/icons/fitview.svg';
 
 const baseStyle = {
   position: 'absolute',
@@ -25,19 +28,19 @@ export default ({ style, className }) => {
         className="react-flow__controls-button react-flow__controls-zoomin"
         onClick={zoomIn}
       >
-        +
+        <img src={plusIcon} />
       </div>
       <div
         className="react-flow__controls-button  react-flow__controls-zoomout"
         onClick={zoomOut}
       >
-        -
+        <img src={minusIcon} />
       </div>
       <div
         className="react-flow__controls-button  react-flow__controls-fitview"
         onClick={fitView}
       >
-        @
+        <img src={fitviewIcon} />
       </div>
     </div>
   );

src/style.css

@@ -151,17 +151,27 @@
   }
 }
 
-.react-flow__controls-button {
-  background: #f8f8f8;
-  border: 1px solid #eee;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+
+  &-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    img {
+      width: 100%;
+    }
+
+    &:hover {
+      background: #f4f4f4;
+    }
+  }
 }
-
-.react-flow__controls-button:hover {
-  background: #eee;
-}