diff --git a/pandora_console/operation/visual_console/view.php b/pandora_console/operation/visual_console/view.php
index b2d61aae61..cae05b8151 100644
--- a/pandora_console/operation/visual_console/view.php
+++ b/pandora_console/operation/visual_console/view.php
@@ -185,7 +185,6 @@ if ($pure === false) {
);
echo '';
echo '
';
- // sub visual_editor_button_toolbox delete_item delete_min
}
echo '
';
diff --git a/visual_console_client/package-lock.json b/visual_console_client/package-lock.json
index 2d6aa65d7d..8c81d39d3a 100644
--- a/visual_console_client/package-lock.json
+++ b/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",
diff --git a/visual_console_client/package.json b/visual_console_client/package.json
index d049a39b10..33abee513e 100644
--- a/visual_console_client/package.json
+++ b/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",
diff --git a/visual_console_client/src/lib/FontAwesomeIcon.styles.css b/visual_console_client/src/lib/FontAwesomeIcon.styles.css
new file mode 100644
index 0000000000..b8101ffa5f
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/visual_console_client/src/lib/FontAwesomeIcon.ts b/visual_console_client/src/lib/FontAwesomeIcon.ts
new file mode 100644
index 0000000000..bd46141568
--- /dev/null
+++ b/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;