<template>
  <image
    :style="{ width: size + 'px', height: size + 'px' }"
    :src="iconSrc"
    mode="aspectFit"
    :class="className || ''"
  />
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    size?: number | string;
    className?: string;
  }>(),
  {
    size: 24,
    className: "",
  }
);

const iconSrc =
  "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIgMTJoLTIuNDhhMiAyIDAgMCAwLTEuOTMgMS40NmwtMi4zNSA4LjM2YS4yNS4yNSAwIDAgMS0uNDggMEw5LjI0IDIuMThhLjI1LjI1IDAgMCAwLS40OCAwbC0yLjM1IDguMzZBMiAyIDAgMCAxIDQuNDkgMTJIMiIgc3Ryb2tlPSIjOGIyMzIzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";
</script>

<style scoped>
image {
  display: inline-block;
  vertical-align: middle;
}
</style>
