Themes: add some icons

assets/layers/food/food.json

@@ -111,7 +111,7 @@
             ]
           },
           "then": {
-            "render": "circle:white;./assets/layers/food/Vegetarian-mark.svg"
+            "render": "./assets/layers/food/Vegetarian-mark.svg"
           }
         },
         {
@@ -684,6 +684,7 @@
       "mappings": [
         {
           "if": "diet:vegetarian=no",
+          "icon": "./assets/layers/food/Vegetarian-mark.svg;cross_bottom_right:red",
           "then": {
             "en": "No vegetarian options are available",
             "nl": "Geen vegetarische opties beschikbaar",
@@ -710,6 +711,7 @@
         },
         {
           "if": "diet:vegetarian=yes",
+          "icon": "./assets/layers/food/Vegetarian-mark.svg",
           "then": {
             "en": "Vegetarian options are available",
             "nl": "Vegetarische opties zijn beschikbaar",
@@ -723,6 +725,7 @@
         },
         {
           "if": "diet:vegetarian=only",
+          "icon": "./assets/layers/food/Vegetarian-mark.svg",
           "then": {
             "en": "All dishes are vegetarian",
             "nl": "Enkel vegetarische opties zijn beschikbaar",

assets/layers/questions/questions.json

@@ -2069,6 +2069,7 @@
       "mappings": [
         {
           "if": "internet_access=wlan",
+          "icon": "wifi",
           "then": {
             "en": "This place offers wireless internet access",
             "nl": "Deze plaats biedt draadloze internettoegang aan",
@@ -2086,6 +2087,8 @@
         },
         {
           "if": "internet_access=no",
+          "icon": "wifi;cross_bottom_right:red",
+
           "then": {
             "en": "This place <b>does not</b> offer internet access",
             "nl": "Deze plaats biedt <b>geen</b> internettoegang aan",
@@ -2121,6 +2124,7 @@
         },
         {
           "if": "internet_access=terminal",
+          "icon": "computer",
           "then": {
             "en": "This place offers internet access via a terminal or computer",
             "nl": "Deze plaats biedt internettoegang via een terminal of computer aan",

src/Models/Constants.ts

@@ -118,45 +118,49 @@ export default class Constants {
      * These are the values that are allowed to use as 'backdrop' icon for a map pin
      */
     private static readonly _defaultPinIcons = [
-        "pin",
+        "addSmall",
+        "brick_wall_round",
+        "brick_wall_square",
         "bug",
-        "square",
-        "square_rounded",
-        "circle",
         "checkmark",
+        "checkmark",
+        "circle",
         "clock",
         "close",
+        "close",
+        "confirm",
+        "computer",
+        "cross_bottom_right",
         "crosshair",
+        "desktop",
+        "direction",
         "gear",
+        "gps_arrow",
+        "heart",
+        "heart_outline",
+        "help",
         "help",
         "home",
         "invalid",
+        "invalid",
+        "link",
         "location",
         "location_empty",
         "location_locked",
+        "mastodon",
+        "not_found",
         "note",
+        "party",
+        "pin",
         "resolved",
         "ring",
         "scissors",
+        "square",
+        "square_rounded",
         "teardrop",
         "teardrop_with_hole_green",
         "triangle",
-        "brick_wall_square",
+        "wifi"
-        "brick_wall_round",
-        "gps_arrow",
-        "checkmark",
-        "help",
-        "close",
-        "invalid",
-        "heart",
-        "heart_outline",
-        "link",
-        "confirm",
-        "direction",
-        "not_found",
-        "mastodon",
-        "party",
-        "addSmall",
     ] as const
     public static readonly defaultPinIcons: string[] = <any>Constants._defaultPinIcons
     /**

src/UI/Map/Icon.svelte

@@ -22,7 +22,7 @@
   import Brick_wall_square from "../../assets/svg/Brick_wall_square.svelte"
   import Brick_wall_round from "../../assets/svg/Brick_wall_round.svelte"
   import Gps_arrow from "../../assets/svg/Gps_arrow.svelte"
-  import { HeartIcon } from "@babeard/svelte-heroicons/solid"
+  import { HeartIcon, WifiIcon } from "@babeard/svelte-heroicons/solid"
   import { HeartIcon as HeartOutlineIcon } from "@babeard/svelte-heroicons/outline"
   import Confirm from "../../assets/svg/Confirm.svelte"
   import Not_found from "../../assets/svg/Not_found.svelte"
@@ -37,6 +37,7 @@
   import Cross_bottom_right from "../../assets/svg/Cross_bottom_right.svelte"
   import { Utils } from "../../Utils"
   import Gear from "../../assets/svg/Gear.svelte"
+  import { DesktopComputerIcon } from "@rgossiaux/svelte-heroicons/solid"
 
   /**
    * Renders a single icon.
@@ -46,7 +47,8 @@
 
   export let icon: string | undefined
   export let color: string | undefined = undefined
-  export let clss: string | undefined = undefined
+  export let clss: string | undefined = ""
+  clss ??= ""
   export let emojiHeight = 40
 </script>
 
@@ -124,7 +126,7 @@
   {:else if icon === "party"}
     <Party {color} class={clss} />
   {:else if icon === "cross_bottom_right"}
-    <Cross_bottom_right {color} class={clss} />
+    <Cross_bottom_right {color} class={"m-0 "+clss} />
   {:else if icon === "addSmall"}
     <AddSmall {color} class={clss} />
   {:else if icon === "gear"}
@@ -133,6 +135,10 @@
     <LinkIcon style="--svg-color: {color}" class={twMerge(clss, "apply-fill")} />
   {:else if icon === "popout"}
     <LinkIcon style="--svg-color: {color}" />
+  {:else if icon === "wifi"}
+    <WifiIcon class={"m-0 " +clss} {color} />
+    {:else if icon === "computer"}
+    <DesktopComputerIcon class={"m-0 "+clss} {color} />
   {:else if Utils.isEmoji(icon)}
     <span style={`font-size: ${emojiHeight}px; line-height: ${emojiHeight}px`}>
       {icon}