Make custom icons show up in ol-ext

Signed-off-by: Daniel Kastl <[email protected]>

Author: dkastl

src/components/gtt-setting.ts

@@ -12,7 +12,7 @@ export const gtt_setting = ():void => {
         text: ''
       })
       $('<i>', {
-        class: "ui-icons material-icons",
+        class: "ui-icons " + item.optgroup.toLowerCase().split(' ').join('-'),
         title: item.label,
         text: item.value
       }).prependTo(wrapper)
@@ -25,21 +25,21 @@ export const gtt_setting = ():void => {
     const selectedValue = element.value
     if (element.length === 1 && selectedValue !== "") {
       element.remove(0)
-      element.append(new Option("", "", false, false))
+      // element.append(new Option("", "", false, false))
     }
     for (let font in FontSymbol.prototype.defs.fonts) {
-      const optgroup = document.createElement("optgroup")
+      const optgroup = document.createElement('optgroup')
       optgroup.label = font
       for (let i in glyph) {
         if (glyph[i].font == font) {
           const selected = selectedValue === i
           const words = i.split('_')
           const text = words.map((word) => {
             return word[0].toUpperCase() + word.substring(1)
-          }).join(" ")
+          }).join(' ')
           optgroup.appendChild(new Option(text, i, selected, selected))
           if (selected) {
-            element.nextElementSibling.className = "material-icons"
+            element.nextElementSibling.className = font.toLowerCase().split(' ').join('-')
             element.nextElementSibling.textContent = i
           }
         }
@@ -51,7 +51,7 @@ export const gtt_setting = ():void => {
     $(element)
       .selectmenu({
         change: function(event: any, data: any) {
-          document.querySelector(`#icon_${element.id}`).className = "material-icons"
+          document.querySelector(`#icon_${element.id}`).className = data.item.optgroup.toLowerCase().split(' ').join('-')
           document.querySelector(`#icon_${element.id}`).textContent = data.item.value
         }
       })

src/index.ts

@@ -3,13 +3,13 @@ import 'ol-ext/dist/ol-ext.min.css'
 import './stylesheets/app.scss'
 
 // Custom Icons
-import './stylesheets/icons.css'
-import './fonts/IconsDef.js'
+import './stylesheets/custom-icons.css'
+import './stylesheets/CustomIconsDef.js'
 
 // Material Design Icons
 // https://github.com/marella/material-design-icons/tree/main/font#readme
 import '@material-design-icons/font/filled.css'
-import './fonts/MaterialDesignDef.js'
+import './stylesheets/MaterialDesignDef.js'
 
 import { GttClient } from './components/gtt-client'
 import { gtt_setting } from './components/gtt-setting'

src/fonts/IconsDef.js renamed to src/stylesheets/CustomIconsDef.js

@@ -1,13 +1,15 @@
 import ol_style_FontSymbol from 'ol-ext/style/FontSymbol'
 
 ol_style_FontSymbol.addDefs(
-{	"font":"General Icons",
-	"name":"General Icons",
+{	"font":"Custom Icons",
+	"name":"Custom Icons",
 	"copyright":"Apache-2.0",
 	"prefix": "gtt"
 },
-{
-
+{ "lobsta": "\uf101",
+  "park-bench": "\uf102",
+  "road": "\uf103",
+  "waste": "\uf104"
 });
 
 export default ol_style_FontSymbol

src/fonts/MaterialDesignDef.js renamed to src/stylesheets/MaterialDesignDef.js

@@ -0,0 +1,53 @@
+@font-face {
+  font-family: "Custom Icons";
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("./custom-icons.woff2") format("woff2");
+}
+.custom-icons {
+  font-family: "Custom Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: "liga";
+}
+
+/* @font-face {
+  font-family: "custom-icons";
+  src: url("./custom-icons.woff2?1109fa2dad74e02707a8301474f34d5d") format("woff2");
+}
+
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+  font-family: custom-icons !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-lobsta:before {
+  content: "\f101";
+}
+.icon-park_bench:before {
+  content: "\f102";
+}
+.icon-road:before {
+  content: "\f103";
+}
+.icon-waste:before {
+  content: "\f104";
+} */