add different identicons for people (and increment version & add -beta)

src/components/EntityIcon.vue

@@ -1,30 +1,23 @@
 <template>
-  <div v-html="generateIdenticon()" class="w-fit"></div>
+  <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 { toSvg } from "jdenticon";
-
-const BLANK_CONFIG = {
-  lightness: {
-    color: [1.0, 1.0],
-    grayscale: [1.0, 1.0],
-  },
-  saturation: {
-    color: 0.0,
-    grayscale: 0.0,
-  },
-  backColor: "#0000",
-};
 
 @Component
 export default class EntityIcon extends Vue {
   @Prop entityId = "";
   @Prop iconSize = 0;
 
-  generateIdenticon() {
-    const config = this.entityId ? undefined : BLANK_CONFIG;
-    const svgString = toSvg(this.entityId, this.iconSize, config);
+  generateIcon() {
+    const options: StyleOptions<object> = {
+      seed: this.entityId || "",
+      size: this.iconSize,
+    };
+    const avatar = createAvatar(avataaars, options);
+    const svgString = avatar.toString();
     return svgString;
   }
 }

src/components/ProjectIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-html="generateIdenticon()" class="w-fit"></div>
+</template>
+<script lang="ts">
+import { toSvg } from "jdenticon";
+import { Vue, Component, Prop } from "vue-facing-decorator";
+
+const BLANK_CONFIG = {
+  lightness: {
+    color: [1.0, 1.0],
+    grayscale: [1.0, 1.0],
+  },
+  saturation: {
+    color: 0.0,
+    grayscale: 0.0,
+  },
+  backColor: "#0000",
+};
+
+@Component
+export default class ProjectIcon extends Vue {
+  @Prop entityId = "";
+  @Prop iconSize = 0;
+
+  generateIdenticon() {
+    const config = this.entityId ? undefined : BLANK_CONFIG;
+    const svgString = toSvg(this.entityId, this.iconSize, config);
+    return svgString;
+  }
+}
+</script>
+<style scoped></style>