show contact's or user's icon in more places

src/components/EntityIcon.vue

@@ -5,20 +5,29 @@
 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 entityId = "";
+  @Prop contact: Contact;
+  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
   @Prop iconSize = 0;
+  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
 
   generateIcon() {
-    const options: StyleOptions<object> = {
-      seed: this.entityId || "",
-      size: this.iconSize,
-    };
-    const avatar = createAvatar(avataaars, options);
-    const svgString = avatar.toString();
-    return svgString;
+    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>