crowd-funder-for-time-pwa/src/components/EntityIcon.vue

<template>
  <div v-html="generateIcon()" class="w-fit"></div>
</template>
<script lang="ts">
import { createAvatar, StyleOptions } from "@dicebear/core";
import { avataaars } from "@dicebear/collection";
import { Vue, Component, Prop } from "vue-facing-decorator";
import { Contact } from "@/db/tables/contacts";

@Component
export default class EntityIcon extends Vue {
  @Prop contact: Contact;
  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
  @Prop iconSize = 0;
  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl

  generateIcon() {
    const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
    if (imageUrl) {
      return `<img src="${imageUrl}" alt="avatar" width="${this.iconSize}" height="${this.iconSize}" />`;
    } else {
      const identifier = this.contact?.did || this.entityId;
      const options: StyleOptions<object> = {
        seed: (identifier as string) || "",
        size: this.iconSize,
      };
      const avatar = createAvatar(avataaars, options);
      const svgString = avatar.toString();
      return svgString;
    }
  }
}
</script>
<style scoped></style>