feat: implement new guild icons

components/Avatar.vue

@@ -3,8 +3,9 @@
 		class="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
-	<Icon v-else
-		name="lucide:user"
+	<DefaultIcon v-else-if="user"
+		:name="displayName"
+		:seed="user.uuid"
 		:alt="displayName" />
 </template>
 
@@ -28,10 +29,6 @@ if (user) {
 	
 	if (user.avatar) {
 		displayAvatar = user.avatar
-	} else if (!isCanvasBlocked()){
-		displayAvatar = generateDefaultIcon(displayName, user.uuid)
-	} else {
-		displayAvatar = null
 	}
 }
 

components/DefaultIcon.vue

@@ -0,0 +1,45 @@
+<template>
+  <div :style="`background-color: ${generateIrcColor(seed, 50)}`"
+	class="default-icon">
+		<span class="default-icon-text">
+			{{ previewName }}
+		</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	seed: string,
+	name: string	
+}>();
+
+let previewName = "";
+if (props.name.length > 3) {
+	let guildName: string[] = props.name.split(' ')
+	for (let i = 0; i < 3; i ++) {
+		if (guildName.length > i) {
+			previewName += guildName[i].charAt(0)
+		} else {
+			break
+		}
+	}
+} else {
+	previewName = props.name
+}
+
+</script>
+
+<style scoped>
+.default-icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.default-icon-text {
+	font-weight: bold;
+
+	color: var(--secondary-text-color)
+}
+</style>