Added SVG FontAwesome icons to the visual console client

pandora_console/operation/visual_console/view.php

@@ -185,7 +185,6 @@ if ($pure === false) {
     );
     echo '</div>';
     echo '<br />';
-    // sub visual_editor_button_toolbox delete_item delete_min
 }
 
 echo '<div id="visual-console-container"></div>';

visual_console_client/package-lock.json

@@ -192,6 +192,19 @@
         "minimist": "^1.2.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.20",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.20.tgz",
+      "integrity": "sha512-5wo0pMNS4gWTkplFAPSfNq4poXwLcgj8+khZs9/zbWMxC0hi6qnehXOrX7i7+Y7XyTQForja2WpR7Nz6LY2BtQ=="
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.10.0.tgz",
+      "integrity": "sha512-Ndt0GR9wU66lBLGMRZN2jv8LEDx+VTfwmnqYKLQ3VttH4ikgTpqBhdr7UF4M3GFYt1CwftrPVuKOUAFleYg7xA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.20"
+      }
+    },
     "@jest/console": {
       "version": "24.7.1",
       "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz",

visual_console_client/package.json

@@ -24,6 +24,7 @@
   },
   "homepage": "https://github.com/pandorafms/pandorafms#readme",
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^5.10.0",
     "@types/d3-shape": "^1.3.1",
     "@types/jest": "^24.0.11",
     "@typescript-eslint/eslint-plugin": "^1.6.0",

visual_console_client/src/lib/FontAwesomeIcon.styles.css

@@ -0,0 +1,37 @@
+/* Styles for the solid icons */
+
+.fa {
+  display: inline-block;
+  margin: 0;
+}
+
+.fa.medium,
+.fa.medium > svg {
+  width: 24px;
+  height: 24px;
+}
+
+.fa.fa-small,
+.fa.fa-small > svg {
+  width: 12px;
+  height: 12px;
+}
+
+.fa.fa-large,
+.fa.fa-large > svg {
+  width: 36px;
+  height: 36px;
+}
+
+.fa-spin {
+  animation: fa-spin 2s infinite linear;
+}
+
+@keyframes fa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

visual_console_client/src/lib/FontAwesomeIcon.ts

@@ -0,0 +1,45 @@
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+import "./FontAwesomeIcon.styles.css";
+
+const svgNS = "http://www.w3.org/2000/svg";
+
+const fontAwesomeIcon = (
+  iconDefinition: IconDefinition,
+  {
+    size,
+    color,
+    spin
+  }: {
+    size?: "small" | "medium" | "large";
+    color?: string;
+    spin?: boolean;
+  }
+): HTMLElement => {
+  const container = document.createElement("figure");
+  container.className = `fa fa-${iconDefinition.iconName}`;
+  if (size) container.classList.add(`fa-${size}`);
+  if (spin) container.classList.add("fa-spin");
+
+  const icon = document.createElementNS(svgNS, "svg");
+  // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
+  icon.setAttribute(
+    "viewBox",
+    `0 0 ${iconDefinition.icon[0]} ${iconDefinition.icon[1]}`
+  );
+  if (color) icon.setAttribute("fill", color);
+
+  // Path
+  const path = document.createElementNS(svgNS, "path");
+  const pathData =
+    typeof iconDefinition.icon[4] === "string"
+      ? iconDefinition.icon[4]
+      : iconDefinition.icon[4][0];
+  path.setAttribute("d", pathData);
+
+  icon.appendChild(path);
+  container.appendChild(icon);
+
+  return container;
+};
+
+export default fontAwesomeIcon;