Avatars don't support SVG format

src/components/CreateRoom.vue

@@ -68,7 +68,7 @@
     <interactive-auth ref="interactiveAuth" />
 
     <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
-      @change="handlePickedUserAvatar($event)" :accept="supportedImageTypes" class="d-none" />
+      @change="handlePickedUserAvatar($event)" :accept="supportedAvatarImageTypes" class="d-none" />
 
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.display.smAndUp ? '50%' : '90%'">
       <v-card>

src/components/Join.vue

@@ -114,7 +114,7 @@
     </div>
 
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
-      :accept="supportedImageTypes" class="d-none" />
+      :accept="supportedAvatarImageTypes" class="d-none" />
 
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>

src/components/Profile.vue

@@ -33,7 +33,7 @@
               type="file"
               name="avatar"
               @change="handlePickedAvatar($event)"
-              :accept="supportedImageTypes"
+              :accept="supportedAvatarImageTypes"
               class="d-none"
             />
           </v-avatar>

src/components/RoomAvatarPicker.vue

@@ -10,7 +10,7 @@
       type="file"
       name="roomAvatar"
       @change="handleRoomPickedAvatar($event)"
-      :accept="supportedImageTypes"
+      :accept="supportedAvatarImageTypes"
       class="d-none"
     />
   </v-avatar>

src/components/create/CreateRoomAvatar.vue

@@ -4,7 +4,7 @@
         <v-icon class="create-room-avatar__icon default" v-else>$vuetify.icons.room_avatar_placeholder</v-icon>
         <v-icon class="create-room-avatar__camera clickable" v-if="!modelValue || !modelValue.image" @click.stop="showRoomAvatarPicker">$vuetify.icons.ic_camera</v-icon>
         <input id="room-avatar-picker" ref="roomAvatar" type="file" name="roomAvatar"
-            @change="handlePickedRoomAvatar($event)" :accept="supportedImageTypes" class="d-none" />
+            @change="handlePickedRoomAvatar($event)" :accept="supportedAvatarImageTypes" class="d-none" />
     </div>
 </template>
 

src/main.js

@@ -16,7 +16,7 @@ import Vue3Sanitize from "vue-3-sanitize";
 import vuetify from './plugins/vuetify';
 import { Buffer } from 'buffer/'
 import { createApp, h } from 'vue';
-import { supportedImageTypes } from '@/plugins/utils';
+import { supportedImageTypes, supportedAvatarImageTypes } from '@/plugins/utils';
 
 globalThis.Buffer = Buffer;
 
@@ -28,7 +28,7 @@ const app = createApp({
   render: () => h(App)
 });
 app.config.globalProperties.supportedImageTypes = supportedImageTypes;
-
+app.config.globalProperties.supportedAvatarImageTypes = supportedAvatarImageTypes;
 
 app.use(Vue3Sanitize, defaultOptions);
 

src/plugins/utils.js

@@ -36,9 +36,17 @@ export const supportedImageTypes = [
   "image/jpg",
   "image/jpeg",
   "image/png",
-  "image/svg",
+  "image/svg+xml",
+  "image/webp",
+];
+
+export const supportedAvatarImageTypes = [
+  "image/bmp",
+  "image/gif",
+  "image/jpg",
+  "image/jpeg",
+  "image/png",
   "image/webp",
-  "image/x-icon"
 ];
 
 // Install extended localized format