Issue 388 - Device node (#397)

* Issue 388 - Device node (first version before review) (#388)

* fix: style linting issues

* review: revert the same padding size of the level 1 components on the sidebar

* feat(uhk-icon): Create uhk-icon set and fix USB device icon visibility in electron

* style: Use semicolon in js files

scripts/generate-svg-sprites.js

@@ -2,8 +2,8 @@ const SVGSpriter = require('svg-sprite');
 const path = require('path');
 const mkdirp = require('mkdirp');
 const fs = require('fs');
-const config = {
-    "dest": "packages/web/src/assets/",
+let config = {
+    'dest': 'packages/uhk-web/src/assets/',
     log: 'verbose',
     'shape': {
         'id': {
@@ -17,18 +17,68 @@ const config = {
             'inline': true,
             'dest': './',
             'sprite': 'compiled_sprite.svg',
-            bust:false
+            bust: false
         }
     }
 };
-const spriter = new SVGSpriter(config);
 
-// Register some SVG files with the spriter
-addInputSvgs(path.join(__dirname, '../packages/web/src/svgs'));
+let spriter = new SVGSpriter(config);
 
+// Register Keyboard SVG files with the spriter
+addInputSvgs(path.join(__dirname, '../packages/uhk-web/src/svgs/keyboard'));
 // Compile the sprite
-spriter.compile(function (error, result, cssData) {
+spriter.compile(writeResultFiles);
 
+// Register scss icon
+config = {
+    'dest': 'packages/uhk-web/src/styles/uhk-icons/',
+    log: 'verbose',
+    'shape': {
+        'id': {
+            'generator': function (name) {
+                return 'icon-' + path.basename(name).slice(0, -4);
+            }
+        }
+    },
+    'mode': {
+        'css': {
+            'dest': './',
+            prefix: '.uhk-%s',
+            sprite: 'uhk-css.svg',
+            bust: false,
+            render: {
+                scss: {
+                    template: './packages/uhk-web/src/svgs/icons/scss-template.mustache',
+                    dest: './uhk-icon.scss'
+                }
+            },
+            dimensions: false
+        }
+    }
+};
+
+spriter = new SVGSpriter(config);
+addInputSvgs(path.join(__dirname, '../packages/uhk-web/src/svgs/icons'));
+spriter.compile(writeResultFiles);
+
+// Helper functions
+function addInputSvgs (dir) {
+    fs.readdirSync(dir).forEach(file => {
+        const fullPath = path.join(dir, file);
+        const stat = fs.statSync(fullPath);
+        if (stat.isDirectory()) {
+            return addInputSvgs(fullPath);
+        }
+        if (path.extname(file) === '.svg') {
+            spriter.add(fullPath, file, fs.readFileSync(fullPath, {encoding: 'utf-8'}));
+        }
+    });
+}
+
+function writeResultFiles (error, result) {
+    if (error) {
+        return console.error(error);
+    }
     // Run through all configured output modes
     for (const mode in result) {
 
@@ -38,18 +88,4 @@ spriter.compile(function (error, result, cssData) {
             fs.writeFileSync(result[mode][type].path, result[mode][type].contents);
         }
     }
-});
-
-function addInputSvgs(dir) {
-    fs.readdirSync(dir).forEach(file => {
-        const fullPath = path.join(dir, file);
-        const stat = fs.statSync(fullPath);
-        if (stat.isDirectory()) {
-            return addInputSvgs(fullPath)
-        }
-        if (path.extname(file) === '.svg') {
-            spriter.add(fullPath, file, fs.readFileSync(fullPath, { encoding: 'utf-8' }));
-        }
-    });
-
 }