Allow to use emoji's as icons, fix #1997

src/UI/InputElement/Validators/IconValidator.ts

@@ -16,6 +16,9 @@ export default class IconValidator extends Validator {
     }
 
     getFeedback(s: string, getCountry, sloppy?: boolean): Translation | undefined {
+        if(Utils.isEmoji(s)){
+            return undefined
+        }
         s = this.reformat(s)
         if (!s.startsWith("http")) {
             if (!IconValidator.allLicenses.has(s)) {

src/UI/Map/DynamicIcon.svelte

@@ -2,6 +2,7 @@
   import { IconConfig } from "../../Models/ThemeConfig/PointRenderingConfig"
   import { Store } from "../../Logic/UIEventSource"
   import Icon from "./Icon.svelte"
+  import { Utils } from "../../Utils"
 
   /**
    * Renders a single icon.
@@ -10,11 +11,21 @@
    */
   export let icon: IconConfig
   export let tags: Store<Record<string, string>>
+  /**
+   * Only used in case of emoji
+   */
+  export let emojiHeight: number = 40
 
   let iconItem = icon.icon?.GetRenderValue($tags)?.Subs($tags)?.txt
   $: iconItem = icon.icon?.GetRenderValue($tags)?.Subs($tags)?.txt
   let color = icon.color?.GetRenderValue($tags)?.txt ?? "#000000"
   $: color = icon.color?.GetRenderValue($tags)?.txt ?? "#000000"
+
+
 </script>
 
-<Icon icon={iconItem} {color} />
+{#if iconItem?.startsWith("<")}
+  {@html iconItem}
+{:else}
+  <Icon icon={iconItem} {color} {emojiHeight} />
+{/if}

src/UI/Map/DynamicMarker.svelte

@@ -11,6 +11,11 @@
   export let marker: IconConfig[]
   export let tags: Store<Record<string, string>>
   export let rotation: TagRenderingConfig = undefined
+
+  /**
+   * Only used in case of emoji
+   */
+  export let emojiHeight: number
   let _rotation: Store<string> = rotation
     ? tags.map((tags) => rotation.GetRenderValue(tags).Subs(tags).txt)
     : new ImmutableStore("0deg")
@@ -23,7 +28,7 @@
   <div class="relative h-full w-full" style={`transform: rotate(${$_rotation})`}>
     {#each marker as icon}
       <div class="absolute top-0 left-0 h-full w-full">
-        <DynamicIcon {icon} {tags} />
+        <DynamicIcon {icon} {tags} {emojiHeight} />
       </div>
     {/each}
   </div>

src/UI/Map/Icon.svelte

@@ -34,7 +34,8 @@
   import { LinkIcon } from "@babeard/svelte-heroicons/mini"
   import Square_rounded from "../../assets/svg/Square_rounded.svelte"
   import Bug from "../../assets/svg/Bug.svelte"
-  import Pop_out from "../../assets/svg/Pop_out.svelte"
+  import Cross_bottom_right from "../../assets/svg/Cross_bottom_right.svelte"
+  import { Utils } from "../../Utils"
 
   /**
    * Renders a single icon.
@@ -45,6 +46,7 @@
   export let icon: string | undefined
   export let color: string | undefined = undefined
   export let clss: string | undefined = undefined
+  export let emojiHeight = 40
 </script>
 
 {#if icon}
@@ -120,12 +122,18 @@
     <Mastodon {color} class={clss} />
   {:else if icon === "party"}
     <Party {color} class={clss} />
+  {:else if icon === "cross_bottom_right"}
+    <Cross_bottom_right {color} class={clss} />
   {:else if icon === "addSmall"}
     <AddSmall {color} class={clss} />
   {:else if icon === "link"}
     <LinkIcon style="--svg-color: {color}" class={twMerge(clss, "apply-fill")} />
   {:else if icon === "popout"}
     <LinkIcon style="--svg-color: {color}" />
+  {:else if Utils.isEmoji(icon)}
+    <span style={`font-size: ${emojiHeight}px; line-height: ${emojiHeight}px`}>
+      {icon}
+    </span>
   {:else}
     <img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true" alt="" />
   {/if}

src/Utils.ts

@@ -1659,4 +1659,14 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
             }
         }
     }
+
+        private static emojiRegex  = /^\p{Extended_Pictographic}+$/u
+
+    /**
+     * Returns 'true' if the given string contains at least one and only emoji characters
+     * @param string
+     */
+    public static isEmoji(string: string){
+        return Utils.emojiRegex.test(string)
+    }
 }