Adds icons on the fly to minimize page load

.eslintrc.js

@@ -73,6 +73,6 @@ module.exports = {
         'require-yield': 'error',
         'space-before-function-paren': ['error', { anonymous: 'always', named: 'never', asyncArrow: 'always' }],
         'object-shorthand': ['error', 'always', { avoidExplicitReturnArrows: true }],
-        'no-console': ["error", { allow: ["warn", "error"] }]
+        'no-console': ["warn", { allow: ["warn", "error"] }]
     }
 };

app/helpers/actions.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const $ = require('jquery');
+const octicons = require("octicons");
 const common = require('./common');
 
 /**
@@ -21,10 +22,42 @@ module.exports = {
      * @param {String} selector
      */
     copy(selector) {
-        $(selector).find('.copy-action').on('click', function () {
+        let actionIcon = $(selector).find('.copy-action');
+
+        actionIcon.on('click', () => {
             let element = $(this).parent().find('.output');
 
             common.copyToClipboard(element[0]);
         });
+
+        this.insertIcon(selector, 'copy', 'clippy');
+    },
+
+    /**
+     * Inserts an icon within the desired element
+     * @param {Object} selector
+     * @param {String} action
+     * @param {String} icon
+     */
+    insertIcon(selector, action, icon) {
+        let actionIcon = $(selector).find(`.${action}-action`);
+
+        $(selector).on('mouseenter mouseleave', (ev) => {
+            let type = ev.type;
+
+            if (type === 'mouseenter') {
+                actionIcon.append(this.generateIcon(icon));
+            } else if (type === 'mouseleave') {
+                actionIcon.find('.icon').remove();
+            }
+        });
+    },
+
+    /**
+     * Outputs the correct markup for the oction
+     * @param {String} icon
+     */
+    generateIcon(icon) {
+        return `<span class="icon">${octicons[icon].toSVG()}</span>`;
     }
 };

app/routes/index.js

@@ -3,7 +3,6 @@
  */
 const router = require('express').Router();
 const basic = require('../models/basic');
-const octicons = require("octicons");
 
 /* GET home page. */
 router.get('/', function (req, res, next) {
@@ -14,8 +13,7 @@ router.get('/', function (req, res, next) {
             layoutId : 'index',
             data     : basic.gatherData({
                 location
-            }),
-            octicons
+            })
         });
 
     }, next);

app/templates/scaffolding/mixins.pug

@@ -49,10 +49,5 @@ mixin list(id = '', output, enableCopy, ...listItems)
                     +output(item)
                     if enableCopy
                         span.action.copy-action.ml-10.tooltip.tooltip-right(data-tooltip="Copy")
-                            +icon('clippy')
             else
-                li=item
-
-//- Mixin for generating an icon element
-mixin icon(icon)
-    span.icon!=octicons[icon].toSVG()
+                li=item