diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index e24244a1..077ec043 100644 --- a/DEVELOPMENT.md +++ b/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-` 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/.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("");`. +- Use it in markup as `class="ion-"`. diff --git a/assets/fonts/meshviewer.ttf b/assets/fonts/meshviewer.ttf deleted file mode 100644 index 7b6ad06f..00000000 Binary files a/assets/fonts/meshviewer.ttf and /dev/null differ diff --git a/assets/fonts/meshviewer.woff b/assets/fonts/meshviewer.woff deleted file mode 100644 index 0ffed290..00000000 Binary files a/assets/fonts/meshviewer.woff and /dev/null differ diff --git a/assets/fonts/meshviewer.woff2 b/assets/fonts/meshviewer.woff2 deleted file mode 100644 index 75d9dd9f..00000000 Binary files a/assets/fonts/meshviewer.woff2 and /dev/null differ diff --git a/assets/icons/_icon-mixin.scss b/assets/icons/_icon-mixin.scss index 1b3b36e0..0eaaca2f 100644 --- a/assets/icons/_icon-mixin.scss +++ b/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"); } } diff --git a/assets/icons/icon.scss b/assets/icons/icon.scss index 643a7cee..e4eb5595 100644 --- a/assets/icons/icon.scss +++ b/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"); diff --git a/assets/icons/svg/arrow-resize.svg b/assets/icons/svg/arrow-resize.svg new file mode 100644 index 00000000..5d71ff34 --- /dev/null +++ b/assets/icons/svg/arrow-resize.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/arrow-right-c.svg b/assets/icons/svg/arrow-right-c.svg new file mode 100644 index 00000000..ea853b08 --- /dev/null +++ b/assets/icons/svg/arrow-right-c.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/chevron-left.svg b/assets/icons/svg/chevron-left.svg new file mode 100644 index 00000000..2cbcca02 --- /dev/null +++ b/assets/icons/svg/chevron-left.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/clipboard.svg b/assets/icons/svg/clipboard.svg new file mode 100644 index 00000000..dfdc15cb --- /dev/null +++ b/assets/icons/svg/clipboard.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/close.svg b/assets/icons/svg/close.svg new file mode 100644 index 00000000..2557e4fb --- /dev/null +++ b/assets/icons/svg/close.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/connection-bars.svg b/assets/icons/svg/connection-bars.svg new file mode 100644 index 00000000..cff96ff6 --- /dev/null +++ b/assets/icons/svg/connection-bars.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/down-b.svg b/assets/icons/svg/down-b.svg new file mode 100644 index 00000000..ced59a62 --- /dev/null +++ b/assets/icons/svg/down-b.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/eye.svg b/assets/icons/svg/eye.svg new file mode 100644 index 00000000..2c0c041d --- /dev/null +++ b/assets/icons/svg/eye.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/filter.svg b/assets/icons/svg/filter.svg new file mode 100644 index 00000000..4b4f8e39 --- /dev/null +++ b/assets/icons/svg/filter.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/full-enter.svg b/assets/icons/svg/full-enter.svg new file mode 100644 index 00000000..f5aae69f --- /dev/null +++ b/assets/icons/svg/full-enter.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/full-exit.svg b/assets/icons/svg/full-exit.svg new file mode 100644 index 00000000..1d70edcb --- /dev/null +++ b/assets/icons/svg/full-exit.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/layer.svg b/assets/icons/svg/layer.svg new file mode 100644 index 00000000..cd60756a --- /dev/null +++ b/assets/icons/svg/layer.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/locate.svg b/assets/icons/svg/locate.svg new file mode 100644 index 00000000..b4b9c34c --- /dev/null +++ b/assets/icons/svg/locate.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/location.svg b/assets/icons/svg/location.svg new file mode 100644 index 00000000..b3b94587 --- /dev/null +++ b/assets/icons/svg/location.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/people.svg b/assets/icons/svg/people.svg new file mode 100644 index 00000000..ba0a7c87 --- /dev/null +++ b/assets/icons/svg/people.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/pin.svg b/assets/icons/svg/pin.svg new file mode 100644 index 00000000..84b0a1a6 --- /dev/null +++ b/assets/icons/svg/pin.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/ruler.svg b/assets/icons/svg/ruler.svg new file mode 100644 index 00000000..d5905024 --- /dev/null +++ b/assets/icons/svg/ruler.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/share-alt.svg b/assets/icons/svg/share-alt.svg new file mode 100644 index 00000000..e9b3250f --- /dev/null +++ b/assets/icons/svg/share-alt.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/time.svg b/assets/icons/svg/time.svg new file mode 100644 index 00000000..cc245ff6 --- /dev/null +++ b/assets/icons/svg/time.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/up-b.svg b/assets/icons/svg/up-b.svg new file mode 100644 index 00000000..6dee6a0a --- /dev/null +++ b/assets/icons/svg/up-b.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/svg/wifi.svg b/assets/icons/svg/wifi.svg new file mode 100644 index 00000000..5b24c6a3 --- /dev/null +++ b/assets/icons/svg/wifi.svg @@ -0,0 +1 @@ + diff --git a/scss/custom/_custom.scss b/scss/custom/_custom.scss index 138593f9..67ab059b 100644 --- a/scss/custom/_custom.scss +++ b/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); +} diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss index 7f7de877..9dffd7db 100644 --- a/scss/modules/_button.scss +++ b/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; diff --git a/scss/modules/_leaflet.scss b/scss/modules/_leaflet.scss index 418ab08f..6eb6de25 100644 --- a/scss/modules/_leaflet.scss +++ b/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"); } } diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss index 98149fe8..839a981e 100644 --- a/scss/modules/_sidebar.scss +++ b/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; } diff --git a/scss/modules/_table.scss b/scss/modules/_table.scss index be40639b..343579bb 100644 --- a/scss/modules/_table.scss +++ b/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"); } } diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss index 56b21b24..255d1597 100644 --- a/scss/modules/_variables.scss +++ b/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; diff --git a/vite.config.js b/vite.config.js index 7ec943fe..bb5cd1c2 100644 --- a/vite.config.js +++ b/vite.config.js @@ -9,6 +9,7 @@ export default defineConfig({ resolve: { alias: { "@fonts": resolve(__dirname, "assets/fonts"), + "@icons": resolve(__dirname, "assets/icons/svg"), }, }, define: {