feat(controls): add icons #8

assets/icons/fitview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 124.2c0-6.9 5.2-12.2 12.2-12.2H176V64h-66.8C75.7 64 48 90.7 48 124.2V192h48v-67.8zM403.6 64H336v48h67.2c6.9 0 12.8 5.2 12.8 12.2V192h48v-67.8c0-33.5-27-60.2-60.4-60.2zM416 386.8c0 6.9-5.2 12.2-12.2 12.2H336v49h67.8c33.5 0 60.2-27.7 60.2-61.2V320h-48v66.8zM108.2 399c-6.9 0-12.2-5.2-12.2-12.2V320H48v66.8c0 33.5 27.7 61.2 61.2 61.2H176v-49h-67.8z"/></svg>

assets/icons/minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 235h320v42H96z"/></svg>

assets/icons/plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M416 277.333H277.333V416h-42.666V277.333H96v-42.666h138.667V96h42.666v138.667H416v42.666z"/></svg>

package-lock.json

@@ -8372,6 +8372,33 @@
         "opener": "1"
       }
     },
+    "rollup-plugin-svg": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz",
+      "integrity": "sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^1.3.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
+          "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
+          "dev": true
+        },
+        "rollup-pluginutils": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
+          "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^0.2.1",
+            "minimatch": "^3.0.2"
+          }
+        }
+      }
+    },
     "rollup-plugin-uglify": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/rollup-plugin-uglify/-/rollup-plugin-uglify-6.0.3.tgz",

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 {
+.react-flow__controls {
-  background: #f8f8f8;
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-  border: 1px solid #eee;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-}
 
-.react-flow__controls-button:hover {
+  &-button {
-  background: #eee;
+    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;
+    }
+  }
 }