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";

@Component
export default class EntityIcon extends Vue {
  @Prop entityId = "";
  @Prop iconSize = 0;

  generateIcon() {
    const options: StyleOptions<object> = {
      seed: this.entityId || "",
      size: this.iconSize,
    };
    const avatar = createAvatar(avataaars, options);
    const svgString = avatar.toString();
    return svgString;
  }
}
</script>
<style scoped></style>