colour icons

client/src/components/shapes.jsx

@@ -6,6 +6,7 @@ const saw = require('./svgs/saw');
 const square = require('./svgs/square');
 const squircle = require('./svgs/squircle');
 const triangle = require('./svgs/triangle');
+const vboxColour = require('./svgs/colour');
 
 module.exports = {
     circle,
@@ -16,4 +17,5 @@ module.exports = {
     squircle,
     triangle,
     saw,
+    vboxColour,
 };

client/src/components/svgs/colour.jsx

@@ -0,0 +1,31 @@
+const preact = require('preact');
+
+module.exports = function triangle(classes) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 40" className={classes} >
+          <path id="Unnamed"
+                fill="none" strokeWidth="1px"
+                d="M 21.18,19.55
+                   C 21.18,19.55 78.55,19.55 78.55,19.55M 85.00,14.00
+                   C 85.00,14.00 85.00,25.00 85.00,25.00
+                     85.00,25.00 15.00,25.00 15.00,25.00
+                     15.00,25.00 15.00,14.00 15.00,14.00
+                     15.00,14.00 85.00,14.00 85.00,14.00 Z
+                   M 85.00,14.00
+                   C 85.00,14.00 85.00,25.00 85.00,25.00
+                     85.00,25.00 15.00,25.00 15.00,25.00
+                     15.00,25.00 15.00,14.00 15.00,14.00
+                     15.00,14.00 85.00,14.00 85.00,14.00 Z
+                   M 95.00,4.00
+                   C 95.00,4.00 95.00,35.00 95.00,35.00
+                     95.00,35.00 4.00,35.00 4.00,35.00
+                     4.00,35.00 4.00,4.00 4.00,4.00
+                     4.00,4.00 95.00,4.00 95.00,4.00 Z
+                   M 90.00,9.00
+                   C 90.00,9.00 90.00,30.00 90.00,30.00
+                     90.00,30.00 9.00,30.00 9.00,30.00
+                     9.00,30.00 9.00,9.00 9.00,9.00
+                     9.00,9.00 90.00,9.00 90.00,9.00 Z" />
+        </svg>
+    );
+}

client/src/components/vbox.component.jsx

@@ -1,7 +1,14 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
+const shapes = require('./shapes');
+
 function convertVar(v) {
+    if (['Red', 'Green', 'Blue'].includes(v)) {
+        return (
+            shapes.vboxColour(v.toLowerCase())
+        );
+    }
     return v || <span>&nbsp;</span>;
     // uncomment for double borders in vbox;
     // if (v) {