refactor: removed icon fonts in ace editor

package-lock.json

@@ -13,7 +13,6 @@
         "@electron/remote": "~2.0.1",
         "@faker-js/faker": "~6.1.2",
         "@jamescoyle/vue-icon": "~0.1.2",
-        "@mdi/font": "~7.2.96",
         "@mdi/js": "~7.2.96",
         "@turf/helpers": "~6.5.0",
         "@vueuse/core": "~10.4.1",
@@ -2107,11 +2106,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/@mdi/font": {
-      "version": "7.2.96",
-      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
-      "integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
-    },
     "node_modules/@mdi/js": {
       "version": "7.2.96",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",

package.json

@@ -121,7 +121,6 @@
     "@electron/remote": "~2.0.1",
     "@faker-js/faker": "~6.1.2",
     "@jamescoyle/vue-icon": "~0.1.2",
-    "@mdi/font": "~7.2.96",
     "@mdi/js": "~7.2.96",
     "@turf/helpers": "~6.5.0",
     "@vueuse/core": "~10.4.1",

src/renderer/components/BaseTextEditor.vue

@@ -136,9 +136,4 @@ onMounted(() => {
     width: 100%;
   }
 }
-
-.ace_.mdi {
-  display: inline-block;
-  width: 17px;
-}
 </style>

src/renderer/components/QueryEditor.vue

@@ -403,11 +403,6 @@ defineExpose({ editor });
   }
 }
 
-.ace_.mdi {
-  display: inline-block;
-  width: 17px;
-}
-
 .ace_gutter-cell.ace_breakpoint {
   &::before {
     content: '\F0403';

src/renderer/images/svg/alphabetical-variant.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7A2 2 0 0 0 1 9V17H3V13H5V17H7V9A2 2 0 0 0 5 7H3M3 9H5V11H3M15 10.5V9A2 2 0 0 0 13 7H9V17H13A2 2 0 0 0 15 15V13.5A1.54 1.54 0 0 0 13.5 12A1.54 1.54 0 0 0 15 10.5M13 15H11V13H13V15M13 11H11V9H13M19 7A2 2 0 0 0 17 9V15A2 2 0 0 0 19 17H21A2 2 0 0 0 23 15V14H21V15H19V9H21V10H23V9A2 2 0 0 0 21 7Z" /></svg>

src/renderer/images/svg/arrow-right-bold-box.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z" /></svg>

src/renderer/images/svg/calendar-clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z" /></svg>

src/renderer/images/svg/circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>

src/renderer/images/svg/code-braces.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z" /></svg>

src/renderer/images/svg/cube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L6.04,7.5L12,10.85L17.96,7.5L12,4.15Z" /></svg>

src/renderer/images/svg/rhombus-split-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C11.5 2 11 2.19 10.59 2.59L2.59 10.59C1.8 11.37 1.8 12.63 2.59 13.41L10.59 21.41C11.37 22.2 12.63 22.2 13.41 21.41L21.41 13.41C22.2 12.63 22.2 11.37 21.41 10.59L13.41 2.59C13 2.19 12.5 2 12 2M12 4L15.29 7.29L12 10.59L8.71 7.29L12 4M7.29 8.71L10.59 12L7.29 15.29L4 12L7.29 8.71M16.71 8.71L20 12L16.71 15.29L13.41 12L16.71 8.71M12 13.41L15.29 16.71L12 20L8.71 16.71L12 13.41Z" /></svg>

src/renderer/images/svg/sync-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 12A10 10 0 1 0 12 2A10 10 0 0 0 2 12M15.6 13.72A4 4 0 0 0 16 12A4 4 0 0 0 12 8V10L8.88 7L12 4V6A6 6 0 0 1 18 12A5.9 5.9 0 0 1 17.07 15.19M6 12A5.9 5.9 0 0 1 6.93 8.81L8.4 10.28A4 4 0 0 0 8 12A4 4 0 0 0 12 16V14L15 17L12 20V18A6 6 0 0 1 6 12Z" /></svg>

src/renderer/images/svg/table-cog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3H17C18.11 3 19 3.9 19 5V12.08C17.45 11.82 15.92 12.18 14.68 13H11V17H12.08C11.97 17.68 11.97 18.35 12.08 19H3C1.9 19 1 18.11 1 17V5C1 3.9 1.9 3 3 3M3 7V11H9V7H3M11 7V11H17V7H11M3 13V17H9V13H3M22.78 19.32L21.71 18.5C21.73 18.33 21.75 18.17 21.75 18S21.74 17.67 21.71 17.5L22.77 16.68C22.86 16.6 22.89 16.47 22.83 16.36L21.83 14.63C21.77 14.5 21.64 14.5 21.5 14.5L20.28 15C20 14.82 19.74 14.65 19.43 14.53L19.24 13.21C19.23 13.09 19.12 13 19 13H17C16.88 13 16.77 13.09 16.75 13.21L16.56 14.53C16.26 14.66 15.97 14.82 15.71 15L14.47 14.5C14.36 14.5 14.23 14.5 14.16 14.63L13.16 16.36C13.1 16.47 13.12 16.6 13.22 16.68L14.28 17.5C14.26 17.67 14.25 17.83 14.25 18S14.26 18.33 14.28 18.5L13.22 19.32C13.13 19.4 13.1 19.53 13.16 19.64L14.16 21.37C14.22 21.5 14.35 21.5 14.47 21.5L15.71 21C15.97 21.18 16.25 21.35 16.56 21.47L16.75 22.79C16.77 22.91 16.87 23 17 23H19C19.12 23 19.23 22.91 19.25 22.79L19.44 21.47C19.74 21.34 20 21.18 20.28 21L21.5 21.5C21.64 21.5 21.77 21.5 21.84 21.37L22.84 19.64C22.9 19.53 22.87 19.4 22.78 19.32M18 19.5C17.17 19.5 16.5 18.83 16.5 18S17.18 16.5 18 16.5 19.5 17.17 19.5 18 18.84 19.5 18 19.5Z" /></svg>

src/renderer/images/svg/table-eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 16.88C17.56 16.88 18 17.32 18 17.88S17.56 18.88 17 18.88 16 18.43 16 17.88 16.44 16.88 17 16.88M17 13.88C19.73 13.88 22.06 15.54 23 17.88C22.06 20.22 19.73 21.88 17 21.88S11.94 20.22 11 17.88C11.94 15.54 14.27 13.88 17 13.88M17 15.38C15.62 15.38 14.5 16.5 14.5 17.88S15.62 20.38 17 20.38 19.5 19.26 19.5 17.88 18.38 15.38 17 15.38M18 3H4C2.9 3 2 3.9 2 5V17C2 18.1 2.9 19 4 19H9.42C9.26 18.68 9.12 18.34 9 18C9.12 17.66 9.26 17.32 9.42 17H4V13H10V15.97C10.55 15.11 11.23 14.37 12 13.76V13H13.15C14.31 12.36 15.62 12 17 12C18.06 12 19.07 12.21 20 12.59V5C20 3.9 19.1 3 18 3M10 11H4V7H10V11M18 11H12V7H18V11Z" /></svg>

src/renderer/images/svg/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,4H19A2,2 0 0,1 21,6V18A2,2 0 0,1 19,20H5A2,2 0 0,1 3,18V6A2,2 0 0,1 5,4M5,8V12H11V8H5M13,8V12H19V8H13M5,14V18H11V14H5M13,14V18H19V14H13Z" /></svg>

src/renderer/index.ts

@@ -1,5 +1,4 @@
 'use strict';
-import '@mdi/font/css/materialdesignicons.css';
 import 'floating-vue/dist/style.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';

src/renderer/libs/ext-language_tools.js

@@ -1227,42 +1227,42 @@ ace.define('ace/autocomplete/popup', ['require', 'exports', 'module', 'ace/virtu
 
             switch (meta) {
                case 'table':
-                  iconClass = 'mdi-table';
+                  iconClass = 'editor-icon-table';
                   break;
                case 'column':
-                  iconClass = 'mdi-rhombus-split-outline';
+                  iconClass = 'editor-icon-rhombus-split-outline';
                   break;
                case 'view':
-                  iconClass = 'mdi-table-eye';
+                  iconClass = 'editor-icon-table-eye';
                   break;
                case 'trigger':
-                  iconClass = 'mdi-table-cog';
+                  iconClass = 'editor-icon-table-cog';
                   break;
                case 'routine':
-                  iconClass = 'mdi-sync-circle';
+                  iconClass = 'editor-icon-sync-circle';
                   break;
                case 'function':
-                  iconClass = 'mdi-arrow-right-bold-box';
+                  iconClass = 'editor-icon-arrow-right-bold-box';
                   break;
                case 'scheduler':
-                  iconClass = 'mdi-calendar-clock';
+                  iconClass = 'editor-icon-calendar-clock';
                   break;
                case 'keyword':
-                  iconClass = 'mdi-cube';
+                  iconClass = 'editor-icon-cube';
                   break;
                case 'snippet':
-                  iconClass = 'mdi-code-braces';
+                  iconClass = 'editor-icon-code-braces';
                   break;
                case 'local':
-                  iconClass = 'mdi-alphabetical-variant';
+                  iconClass = 'editor-icon-alphabetical-variant';
                   break;
                default:
-                  iconClass = 'mdi-circle';
+                  iconClass = 'editor-icon-circle';
                   break;
             }
 
             iconClass && tokens.push({
-               type: ` mdi ${iconClass}`,
+               type: ` editor-icon ${iconClass}`,
                value: ' '
             });
          }

src/renderer/scss/_editor-icons.scss

@@ -0,0 +1,67 @@
+/* stylelint-disable selector-class-pattern */
+
+/* Only used in ext-language_tools.js */
+.editor-icon {
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  background-size: cover;
+  position: relative;
+  top: 2px;
+  margin-right: 1px;
+  opacity: 0.7;
+
+  &.editor-icon-table {
+    background-image: url("../images/svg/table.svg");
+  }
+
+  &.editor-icon-rhombus-split-outline {
+    background-image: url("../images/svg/rhombus-split-outline.svg");
+  }
+
+  &.editor-icon-table-eye {
+    background-image: url("../images/svg/table-eye.svg");
+  }
+
+  &.editor-icon-table-cog {
+    background-image: url("../images/svg/table-cog.svg");
+  }
+
+  &.editor-icon-sync-circle {
+    background-image: url("../images/svg/sync-circle.svg");
+  }
+
+  &.editor-icon-arrow-right-bold-box {
+    background-image: url("../images/svg/arrow-right-bold-box.svg");
+  }
+
+  &.editor-icon-calendar-clock {
+    background-image: url("../images/svg/calendar-clock.svg");
+  }
+
+  &.editor-icon-cube {
+    background-image: url("../images/svg/cube.svg");
+  }
+
+  &.editor-icon-code-braces {
+    background-image: url("../images/svg/code-braces.svg");
+  }
+
+  &.editor-icon-alphabetical-variant {
+    background-image: url("../images/svg/alphabetical-variant.svg");
+  }
+
+  &.editor-icon-circle {
+    background-image: url("../images/svg/circle.svg");
+  }
+
+  &::before {
+    line-height: 1;
+  }
+}
+
+.ace_dark {
+  .editor-icon {
+    filter: invert(100%);
+  }
+}

src/renderer/scss/_mdi-additions.scss

@@ -1,9 +0,0 @@
-.mdi {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &::before {
-    line-height: 1;
-  }
-}

src/renderer/scss/main.scss

@@ -5,7 +5,7 @@
 @import "data-types";
 @import "table-keys";
 @import "fake-tables";
-@import "mdi-additions";
+@import "editor-icons";
 @import "db-icons";
 @import "themes/dark-theme";
 @import "themes/light-theme";