malice

<script lang="ts">

  import { twemojiUrl } from './twemoji';

  export let emoji: string;

  export let size: number | string = 20;

  export let label: string | null = null;

  export let lazy = false;

  let failed = false;

  $: emoji, (failed = false);

  $: dim = typeof size === 'number' ? `${size}px` : size;

  $: align = typeof size === 'number' ? 'middle' : '-0.25em';

</script>

{#if failed}

  <span class="native" style={`font-size:${dim}`} aria-label={label ?? undefined}>{emoji}</span>

{:else}

  <img

    class="emoji"

    src={twemojiUrl(emoji)}

    alt={emoji}

    aria-label={label ?? undefined}

    style={`width:${dim};height:${dim};vertical-align:${align}`}

    draggable="false"

    loading={lazy ? 'lazy' : undefined}

    decoding="async"

    on:error={() => (failed = true)}

  />

{/if}

<style>

  .emoji { display: inline-block; object-fit: contain; }

  .native { display: inline-block; line-height: 1; vertical-align: middle; }

</style>