feat: add vite-svg-loader and add Logo component (#971)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/971
Reviewed-by: konrad <k@knt.li>
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>

src/views/migrator/MigrateService.vue

@@ -41,7 +41,7 @@
 					<div class="progress-dots">
 						<span v-for="i in progressDotsCount" :key="i" />
 					</div>
-					<img alt="Vikunja" :src="logoUrl" />
+					<Logo alt="Vikunja" />
 				</div>
 				<p>{{ $t('migrate.inProgress') }}</p>
 			</div>
@@ -70,14 +70,17 @@
 <script>
 import AbstractMigrationService from '@/services/migrator/abstractMigration'
 import AbstractMigrationFileService from '@/services/migrator/abstractMigrationFile'
-import {MIGRATORS} from './migrators'
+import Logo from '@/assets/logo.svg?component'
 
-import logoUrl from '@/assets/logo.svg'
+import {MIGRATORS} from './migrators'
 
 const PROGRESS_DOTS_COUNT = 8
 
 export default {
 	name: 'MigrateService',
+
+	components: { Logo },
+
 	data() {
 		return {
 			progressDotsCount: PROGRESS_DOTS_COUNT,
@@ -87,7 +90,6 @@ export default {
 			message: '',
 			migratorAuthCode: '',
 			migrationService: null,
-			logoUrl,
 		}
 	},
 

src/views/migrator/migrators.ts

@@ -1,8 +1,8 @@
 import wunderlistIcon from './icons/wunderlist.jpg'
-import todoistIcon from './icons/todoist.svg'
-import trelloIcon from './icons/trello.svg'
-import microsoftTodoIcon from './icons/microsoft-todo.svg'
-import vikunjaFileIcon from './icons/vikunja-file.png'
+import todoistIcon from './icons/todoist.svg?url'
+import trelloIcon from './icons/trello.svg?url'
+import microsoftTodoIcon from './icons/microsoft-todo.svg?url'
+import vikunjaFileIcon from './icons/vikunja-file.png?url'
 
 export interface Migrator {
 	id: string