assets: replace meshviewer.woff2 icon font with SVG masks

DEVELOPMENT.md

@@ -81,8 +81,8 @@ but also names based on elements like `p`, `a`, `div`..
 
 ## Addition of new icons
 
-To add new icons to the `meshviewer.woff2` icon-set, one must edit the icon-set manually.
+Icons are SVG files in `assets/icons/svg/`. The CSS class `ion-<name>` is generated by `assets/icons/icon.scss` and renders the SVG via `mask-image` with `currentColor`, so icons inherit text color and scale with `font-size`.
 
-- This can be done by uploading the existing `meshviewer.tff` to https://icomoon.io/new-app
-- Then, one can add a new icon by searching in the UI or uploading an SVG.
-- Finally, export the iconset and replace the existing one
+- Add the SVG to `assets/icons/svg/<name>.svg`. Use a square `viewBox` and a single-colour shape (mask uses the alpha channel).
+- Register it in `assets/icons/icon.scss` with `@include icon.icon("<name>");`.
+- Use it in markup as `class="ion-<name>"`.

assets/icons/_icon-mixin.scss

@@ -1,7 +1,18 @@
-@mixin icon($name, $code, $prefix: "ion-") {
-  .#{$prefix}#{$name} {
-    &::before {
-      content: "#{$code}";
-    }
+@mixin icon-mask($name) {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  height: 1em;
+  mask-image: url("@icons/#{$name}.svg");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  vertical-align: -2px;
+  width: 1em;
+}
+
+@mixin icon($name, $prefix: "ion-") {
+  .#{$prefix}#{$name}::before {
+    mask-image: url("@icons/#{$name}.svg");
   }
 }

assets/icons/icon.scss

@@ -1,58 +1,32 @@
-@use "sass:string";
 @use "../../scss/mixins/icon" as icon;
-@use "../../scss/modules/variables" as variables;
 
-// Needed for standalone scss
-// @import 'icon-mixin';
-
-$cache-breaker: string.unique-id();
-
-@font-face {
-  font-family: "ionicons";
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url("@fonts/meshviewer.woff2?rel=#{$cache-breaker}") format("woff2"),
-    url("@fonts/meshviewer.woff?rel=#{$cache-breaker}") format("woff"),
-    url("@fonts/meshviewer.ttf?rel=#{$cache-breaker}") format("truetype");
-}
-
-[class^="ion-"],
-[class*=" ion-"] {
-  &::before {
-    display: inline-block;
-    font-family: variables.$font-family-icons;
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: 1;
-    text-rendering: auto;
-    text-transform: none;
-    vertical-align: 0;
-  }
+[class^="ion-"]::before,
+[class*=" ion-"]::before {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  height: 1em;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  vertical-align: -2px;
+  width: 1em;
 }
 
-@include icon.icon("chevron-left", "\f124");
-@include icon.icon("chevron-right", "\f125");
-@include icon.icon("pin", "\f3a3");
-@include icon.icon("wifi", "\f25c");
-@include icon.icon("eye", "\f133");
-@include icon.icon("up-b", "\f10d");
-@include icon.icon("down-b", "\f104");
-@include icon.icon("locate", "\f2e9");
-@include icon.icon("close", "\f2d7");
-@include icon.icon("location", "\f456");
-@include icon.icon("layer", "\f229");
-@include icon.icon("filter", "\f38B");
-@include icon.icon("connection-bars", "\f274");
-@include icon.icon("share-alt", "\f3ac");
-@include icon.icon("clipboard", "\f376");
-@include icon.icon("people", "\f39e");
-@include icon.icon("person", "\f3a0");
-@include icon.icon("time", "\f3b3");
-@include icon.icon("arrow-resize", "\f264");
-@include icon.icon("arrow-left-c", "\f108");
-@include icon.icon("arrow-right-c", "\f10b");
-@include icon.icon("full-enter", "\e901");
-@include icon.icon("full-exit", "\e900");
-@include icon.icon("ruler", "\f333");
+@include icon.icon("pin");
+@include icon.icon("wifi");
+@include icon.icon("eye");
+@include icon.icon("locate");
+@include icon.icon("close");
+@include icon.icon("location");
+@include icon.icon("filter");
+@include icon.icon("connection-bars");
+@include icon.icon("share-alt");
+@include icon.icon("clipboard");
+@include icon.icon("people");
+@include icon.icon("time");
+@include icon.icon("arrow-resize");
+@include icon.icon("arrow-right-c");
+@include icon.icon("full-enter");
+@include icon.icon("full-exit");
+@include icon.icon("ruler");

scss/custom/_custom.scss

@@ -8,3 +8,14 @@
 
 // SCSS supports css with a lot of additional features like variables or mixins.
 // Autoprefixer runs in postcss, no need to add browser-prefixes like -webkit, -moz or -ms
+
+// Test vertical-align tuning for centered SVGs
+// Adjust the variable below to test different pixel offsets
+:root {
+  --icon-va: -2px;
+}
+
+[class^="ion-"]::before,
+[class*=" ion-"]::before {
+  vertical-align: var(--icon-va);
+}

scss/modules/_button.scss

@@ -7,7 +7,6 @@ button {
   border-radius: 0.9em;
   color: variables.$color-black;
   cursor: pointer;
-  font-family: variables.$font-family-icons;
   font-size: variables.$button-font-size;
   height: 1.8em;
   line-height: 1.95;

scss/modules/_leaflet.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "variables";
+@use "../mixins/icon";
 
 .leaflet-pane,
 .leaflet-tile,
@@ -89,10 +90,7 @@
     }
 
     &::before {
-      content: "\f229";
-      font-family: variables.$font-family-icons;
-      speak: none;
-      text-rendering: auto;
+      @include icon.icon-mask("layer");
     }
   }
 

scss/modules/_sidebar.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "variables";
+@use "../mixins/icon";
 
 .sidebar {
   box-sizing: border-box;
@@ -134,7 +135,7 @@
   z-index: 1010;
 
   &::before {
-    content: "\f124";
+    @include icon.icon-mask("chevron-left");
     padding-right: 0.125em;
   }
 

scss/modules/_table.scss

@@ -1,4 +1,5 @@
 @use "variables";
+@use "../mixins/icon";
 
 table {
   border-collapse: separate;
@@ -62,8 +63,7 @@ th {
     }
 
     &::after {
-      content: "\f10d";
-      font-family: variables.$font-family-icons;
+      @include icon.icon-mask("up-b");
       padding-left: 0.25em;
       visibility: hidden;
     }
@@ -77,7 +77,7 @@ th {
 
   &.sort-up {
     &::after {
-      content: "\f104";
+      mask-image: url("@icons/down-b.svg");
     }
   }
 

scss/modules/_variables.scss

@@ -22,7 +22,6 @@ $color-error: #c20000 !default;
 $color-map-background: #f8f4f0 !default;
 
 $font-family: "Assistant", sans-serif !default;
-$font-family-icons: ionicons !default;
 $font-family-monospace: monospace !default;
 $font-size: 15px !default;
 $font-size-small: 11px !default;

vite.config.js

@@ -9,6 +9,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@fonts": resolve(__dirname, "assets/fonts"),
+      "@icons": resolve(__dirname, "assets/icons/svg"),
     },
   },
   define: {