Changed all icons for svgs

- Previously all icon were been imported from Font Awesome, so in order to not depend on such system anymore all icons have been substituted for svgs
eclipse-thingweb · Jan 5, 2024 · 2eb3b8b · 2eb3b8b
1 parent f9fe7f6
commit 2eb3b8b
Show file tree

Hide file tree

Showing 21 changed files with 746 additions and 253 deletions.
diff --git a/packages/web-new/src/assets/img/angle-down-solid.svg b/packages/web-new/src/assets/img/angle-down-solid.svg
diff --git a/packages/web-new/src/assets/img/eye-slash-solid.svg b/packages/web-new/src/assets/img/eye-slash-solid.svg
diff --git a/packages/web-new/src/assets/img/eye-solid.svg b/packages/web-new/src/assets/img/eye-solid.svg
diff --git a/packages/web-new/src/scripts/console.js b/packages/web-new/src/scripts/console.js
@@ -45,11 +45,12 @@ const mainContentElement = document.querySelector(".main-content")
 
 minMaxBtn.addEventListener("click", () => {
 
-    if (minMaxBtn.children[0].classList.contains("fa-down-left-and-up-right-to-center")) {
+    if (minMaxBtn.children[0].classList.contains("collapse-arrows")) {
         mainContentElement.style.flex = "1 0"
         consoleElement.style.flex = `0 39px`
-        minMaxBtn.children[0].classList.remove("fa-down-left-and-up-right-to-center")
-        minMaxBtn.children[0].classList.add("fa-up-right-and-down-left-from-center")
+        minMaxBtn.children[0].classList.remove("collapse-arrows")
+        minMaxBtn.children[0].classList.add("expand-arrows")
+        minMaxBtn.children[0].children[0].setAttribute("d", "M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z")
 
         textIcon.forEach(text => {
             text.classList.remove("hiddenV")
@@ -62,8 +63,9 @@ minMaxBtn.addEventListener("click", () => {
         setTimeout(() => {
             mainContentElement.style.flex = "0 210px"
             consoleElement.style.flex = `1 0`
-            minMaxBtn.children[0].classList.add("fa-down-left-and-up-right-to-center")
-            minMaxBtn.children[0].classList.remove("fa-up-right-and-down-left-from-center")
+            minMaxBtn.children[0].classList.add("collapse-arrows")
+            minMaxBtn.children[0].classList.remove("expand-arrows")
+            minMaxBtn.children[0].children[0].setAttribute("d", "M439 7c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H296c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39L439 7zM72 272H216c13.3 0 24 10.7 24 24V440c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39L73 505c-9.4 9.4-24.6 9.4-33.9 0L7 473c-9.4-9.4-9.4-24.6 0-33.9l87-87L55 313c-6.9-6.9-8.9-17.2-5.2-26.2s12.5-14.8 22.2-14.8z")
 
             if (visualizeTab.checked === true) {
                 visualizeTab.click()

diff --git a/packages/web-new/src/scripts/editor.js b/packages/web-new/src/scripts/editor.js
@@ -92,29 +92,64 @@ function createTab(tabNumber, exampleName, thingType) {
   //Add the close btn element
   const closeBtn = document.createElement("div")
   closeBtn.classList.add("close-tab")
-  //Assign icon to the close btn
-  const closeIcon = document.createElement("i")
-  closeIcon.classList.add("fa-solid", "fa-xmark")
 
-  closeBtn.appendChild(closeIcon)
+  // Create the svg close icon
+  const closeIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  closeIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  closeIconSvg.setAttribute("width", "100%")
+  closeIconSvg.setAttribute("height", "100%")
+  closeIconSvg.setAttribute("viewBox", "0 0 384 512")
+
+  // Create a path element and set its attributes
+  const closeIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  closeIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  //append the path to the svg and the svg to the button
+  closeIconSvg.appendChild(closeIconPath)
+  closeBtn.appendChild(closeIconSvg)
 
   //Create the close confirmation btns
   const confirmBtns = document.createElement("div")
   confirmBtns.classList.add("confirm-btns", "hidden")
 
+  //Confirm close button
   const confirmTabClose = document.createElement("button")
   confirmTabClose.classList.add("confirm-tab-close")
   confirmTabClose.textContent = "Close"
-  const confirmTabIcon = document.createElement("i")
-  confirmTabIcon.classList.add("fa-solid", "fa-check")
-  confirmTabClose.appendChild(confirmTabIcon)
+  // Create the svg confirm close icon
+  const confirmIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  confirmIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  confirmIconSvg.setAttribute("width", "100%")
+  confirmIconSvg.setAttribute("height", "100%")
+  confirmIconSvg.setAttribute("viewBox", "0 0 448 512")
+  confirmIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const confirmIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  confirmIconPath.setAttribute("d", "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z")
+
+  confirmIconSvg.appendChild(confirmIconPath)
+  confirmTabClose.appendChild(confirmIconSvg)
 
+  //Cancel close button
   const cancelTabClose = document.createElement("button")
   cancelTabClose.classList.add("cancel-tab-close")
   cancelTabClose.textContent = "Cancel"
-  const cancelTabIcon = document.createElement("i")
-  cancelTabIcon.classList.add("fa-solid", "fa-xmark")
-  cancelTabClose.appendChild(cancelTabIcon)
+
+  // Create the svg close cancel icon
+  const cancelIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  cancelIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+  cancelIconSvg.setAttribute("width", "100%")
+  cancelIconSvg.setAttribute("height", "100%")
+  cancelIconSvg.setAttribute("viewBox", "0 0 384 512")
+  cancelIconSvg.classList.add("icon")
+
+  // Create a path element and set its attributes
+  const cancelIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+  cancelIconPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z")
+
+  cancelIconSvg.appendChild(cancelIconPath)
+  cancelTabClose.appendChild(cancelIconSvg)
 
   cancelTabClose.addEventListener("click", () => {
     cancelTabClose.parentElement.classList.add("hidden")

diff --git a/packages/web-new/src/scripts/examples-menu.js b/packages/web-new/src/scripts/examples-menu.js
@@ -26,7 +26,7 @@ import { createIde, ideCount, tabsLeft } from "./editor"
 /***********************************************************/
 /*                      Examples menu                      */
 /***********************************************************/
-const closeExamples = document.querySelector(".examples-menu-container__close i")
+const closeExamples = document.querySelector(".examples-menu-container__close .x-icon")
 const examplesMenu = document.querySelector(".examples-menu")
 const examplesBtn = document.querySelector("#examples-btn")
 const categorySelect = document.querySelector('#thing-category')
@@ -267,23 +267,23 @@ async function getAllExamples(categoryId, thingType) {
         exampleNameIcon.classList.add("example-icon")
 
         // Create an SVG element
-        const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-        svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg")
-        svgElement.setAttribute("width", "100%")
-        svgElement.setAttribute("viewBox", "0 0 351 379")
-        svgElement.setAttribute("fill", "none")
+        const tdFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        tdFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        tdFileSvg.setAttribute("width", "100%")
+        tdFileSvg.setAttribute("viewBox", "0 0 351 379")
+        tdFileSvg.setAttribute("fill", "none")
 
         // Create a path element and set its attributes
-        const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path")
-        pathElement.setAttribute("fill-rule", "evenodd")
-        pathElement.setAttribute("clip-rule", "evenodd")
-        pathElement.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
+        const tdFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        tdFilePath.setAttribute("fill-rule", "evenodd")
+        tdFilePath.setAttribute("clip-rule", "evenodd")
+        tdFilePath.setAttribute("d", "M184 0V95.9981C184 107.044 192.954 115.998 204 115.998H300V190H106C89.4315 190 76 203.431 76 220V379H40C17.9086 379 0 361.091 0 339V40C0 17.9086 17.9086 0 40 0H184ZM204 95.9981V4.28427L295.714 95.9981H204ZM189.758 379V265.724H231.32V243.922H189.758H162.019H121.105V265.724H162.019V379H189.758ZM275.017 379H288.654C297.808 379 306.158 377.485 313.703 374.454C321.311 371.362 327.836 367.001 333.278 361.373C338.783 355.683 343.02 348.88 345.988 340.963C349.019 333.046 350.534 324.295 350.534 314.708V308.307C350.534 298.658 349.019 289.907 345.988 282.052C343.02 274.135 338.783 267.332 333.278 261.642C327.774 255.951 321.249 251.591 313.703 248.561C306.219 245.468 297.963 243.922 288.933 243.922H275.017H258.688H247.185V379H259.245H275.017ZM275.017 357.291H288.654C295.952 357.291 302.106 355.652 307.116 352.374C312.126 349.034 315.899 344.179 318.435 337.809C321.032 331.438 322.331 323.738 322.331 314.708V308.121C322.331 301.194 321.589 295.102 320.104 289.845C318.682 284.588 316.548 280.165 313.703 276.578C310.858 272.991 307.364 270.3 303.22 268.507C299.076 266.651 294.313 265.724 288.933 265.724H275.017V357.291Z")
 
         // Append the path element to the SVG element
-        svgElement.appendChild(pathElement)
+        tdFileSvg.appendChild(tdFilePath)
 
         // Append the SVG element to the document body or any other desired location
-        exampleNameIcon.appendChild(svgElement);
+        exampleNameIcon.appendChild(tdFileSvg);
 
         // Append the icon container to the name container
         exampleName.appendChild(exampleNameIcon)
@@ -292,11 +292,21 @@ async function getAllExamples(categoryId, thingType) {
         const exampleNameTitle = document.createElement('p')
         exampleNameTitle.innerText = example[1]["title"]
         exampleName.appendChild(exampleNameTitle)
-
-        // //Create, populate and append the example title toggle arrow
-        const exampleNameArrow = document.createElement('i')
-        exampleNameArrow.classList.add("fa-solid", "fa-chevron-down", "toggle-arrow")
-        exampleName.appendChild(exampleNameArrow)
+
+        //Create, populate and append the example title toggle arrow
+        const exampleArrowSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        exampleArrowSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        exampleArrowSvg.setAttribute("width", "100%")
+        exampleArrowSvg.setAttribute("height", "100%")
+        exampleArrowSvg.setAttribute("viewBox", "0 0 448 512")
+        exampleArrowSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const exampleArrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        exampleArrowPath.setAttribute("d", "M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z")
+
+        exampleArrowSvg.appendChild(exampleArrowPath)
+        exampleName.appendChild(exampleArrowSvg)
 
         //Append the whole name component to the header component
         exampleHeader.appendChild(exampleName)
@@ -305,9 +315,20 @@ async function getAllExamples(categoryId, thingType) {
         const quickBtn = document.createElement('button')
         quickBtn.classList.add("example__header--quick")
         quickBtn.setAttribute("title", "Use")
-        const quickButtonIcon = document.createElement('i')
-        quickButtonIcon.classList.add("fa-solid", "fa-file-import")
-        quickBtn.appendChild(quickButtonIcon)
+        // create the svg icon for the quick use button
+        const importFileSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        importFileSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        importFileSvg.setAttribute("width", "100%")
+        importFileSvg.setAttribute("height", "100%")
+        importFileSvg.setAttribute("viewBox", "0 0 512 512")
+        importFileSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const importFilePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        importFilePath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        importFileSvg.appendChild(importFilePath)
+        quickBtn.appendChild(importFileSvg)
         exampleHeader.appendChild(quickBtn)
 
 
@@ -343,9 +364,21 @@ async function getAllExamples(categoryId, thingType) {
         exampleBtnUse.classList.add("example__btn--use")
         exampleBtns.appendChild(exampleBtnUse)
 
-        const exampleIconUse = document.createElement('i')
-        exampleIconUse.classList.add("fa-solid", "fa-file-import")
-        exampleBtnUse.appendChild(exampleIconUse)
+        //todo: create the apply button
+        // create the svg icon for the apply button
+        const applyIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+        applyIconSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
+        applyIconSvg.setAttribute("width", "100%")
+        applyIconSvg.setAttribute("height", "100%")
+        applyIconSvg.setAttribute("viewBox", "0 0 512 512")
+        applyIconSvg.classList.add("icon")
+
+        // Create a path element and set its attributes
+        const applyIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
+        applyIconPath.setAttribute("d", "M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z")
+
+        applyIconSvg.appendChild(applyIconPath)
+        exampleBtnUse.appendChild(applyIconSvg)
 
         const exampleTxtUse = document.createElement('p')
         exampleTxtUse.innerText = "Apply"