feat: use unplugin-icons for icons

p3pch4t · Jul 21, 2024 · 5f05eb5 · 5f05eb5
1 parent 127d740
commit 5f05eb5
Show file tree

Hide file tree

Showing 50 changed files with 325 additions and 369 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,8 @@
 		"typescript": "^5.4.5",
 		"vite": "^5.3.1",
 		"dompurify": "^3.1.5",
-		"marked": "^13.0.0"
+		"marked": "^13.0.0",
+		"@iconify-json/material-symbols": "^1.1.83",
+		"unplugin-icons": "^0.19.0"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -1,4 +1,11 @@
 declare global {
+	declare module "~icons/*" {
+		import { SvelteComponent } from "svelte";
+		import type { SvelteHTMLElements } from "svelte/elements";
+
+		export default class extends SvelteComponent<SvelteHTMLElements["svg"]> {}
+	}
+
 	namespace App {
 		// interface Error {}
 		// interface Locals {}

diff --git a/src/lib/components/CalendarEventPreview.svelte b/src/lib/components/CalendarEventPreview.svelte
@@ -14,14 +14,14 @@
 	import DeleteEventFab from "$lib/components/fabs/DeleteEventFab.svelte";
 	import EditEventFab from "$lib/components/fabs/EditEventFab.svelte";
 
-	import EventIcon from "$lib/components/icons/EventIcon.svelte";
-	import LocationIcon from "$lib/components/icons/LocationIcon.svelte";
-	import DescriptionIcon from "$lib/components/icons/DescriptionIcon.svelte";
-	import ScheduleIcon from "$lib/components/icons/ScheduleIcon.svelte";
-	import RecurrenceIcon from "$lib/components/icons/RecurrenceIcon.svelte";
+	import EventIcon from "~icons/material-symbols/event-rounded";
+	import LocationIcon from "~icons/material-symbols/location-on-outline-rounded";
+	import DescriptionIcon from "~icons/material-symbols/description-outline-rounded";
+	import ScheduleIcon from "~icons/material-symbols/schedule-outline-rounded";
+	import RecurrenceIcon from "~icons/material-symbols/event-repeat-rounded";
+	import ChevronLeftIcon from "~icons/material-symbols/chevron-left-rounded";
 
 	import type { Calendar, CalendarEvent } from "$lib/calendars";
-	import ChevronLeftIcon from "$lib/components/icons/ChevronLeftIcon.svelte";
 
 	export let event: CalendarEvent | undefined;
 	export let calendar: Calendar | undefined;

diff --git a/src/lib/components/DatePicker.svelte b/src/lib/components/DatePicker.svelte
@@ -6,7 +6,7 @@
 
 	import "@material/web/textfield/filled-text-field";
 	import "@material/web/iconbutton/icon-button";
-	import CalendarMonthIcon from "$lib/components/icons/CalendarMonthIcon.svelte";
+	import CalendarMonthIcon from "~icons/material-symbols/calendar-month-rounded";
 
 	import ModalDatePicker, { datePickerTextFieldHandler } from "./ModalDatePicker.svelte";
 	import type { MdFilledTextField } from "@material/web/textfield/filled-text-field";

diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
@@ -12,7 +12,7 @@
 	import { setContext, tick, onDestroy } from "svelte";
 
 	import "@material/web/textfield/filled-text-field";
-	import ArrowDropDownIcon from "./icons/ArrowDropDownIcon.svelte";
+	import ArrowDropDownIcon from "~icons/material-symbols/arrow-drop-down-rounded";
 
 	export let _class = "";
 	export { _class as class };

diff --git a/src/lib/components/ModalDatePicker.svelte b/src/lib/components/ModalDatePicker.svelte
@@ -62,11 +62,11 @@
 	import "@material/web/iconbutton/icon-button";
 	import { type MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
 	import type { MdFilledTextField } from "@material/web/textfield/filled-text-field";
-	import ChevronLeftIcon from "$lib/components/icons/ChevronLeftIcon.svelte";
-	import ChevronRightIcon from "$lib/components/icons/ChevronRightIcon.svelte";
-	import CalendarTodayIcon from "$lib/components/icons/CalendarTodayIcon.svelte";
-	import EditIcon from "$lib/components/icons/EditIcon.svelte";
-	import ArrowDropDownIcon from "$lib/components/icons/ArrowDropDownIcon.svelte";
+	import ChevronLeftIcon from "~icons/material-symbols/chevron-left-rounded";
+	import ChevronRightIcon from "~icons/material-symbols/chevron-right-rounded";
+	import CalendarTodayIcon from "~icons/material-symbols/calendar-today-rounded";
+	import EditIcon from "~icons/material-symbols/edit-rounded";
+	import ArrowDropDownIcon from "~icons/material-symbols/arrow-drop-down-rounded";
 
 	import { monthNames, narrowWeekdayNames } from "$lib/shared";
 

diff --git a/src/lib/components/ThemeSwitcher.svelte b/src/lib/components/ThemeSwitcher.svelte
@@ -22,8 +22,8 @@
 </script>
 
 <script lang="ts">
-	import DarkModeIcon from "$lib/components/icons/DarkModeIcon.svelte";
-	import LightModeIcon from "$lib/components/icons/LightModeIcon.svelte";
+	import DarkModeIcon from "~icons/material-symbols/dark-mode-outline-rounded";
+	import LightModeIcon from "~icons/material-symbols/light-mode-outline-rounded";
 
 	function toggleTheme() {
 		$darkMode = !$darkMode;

diff --git a/src/lib/components/TimePicker.svelte b/src/lib/components/TimePicker.svelte
@@ -6,7 +6,7 @@
 
 	import "@material/web/textfield/filled-text-field";
 	import "@material/web/iconbutton/icon-button";
-	import ScheduleIcon from "$lib/components/icons/ScheduleIcon.svelte";
+	import ScheduleIcon from "~icons/material-symbols/schedule-outline-rounded";
 
 	import ModalTimePicker from "./ModalTimePicker.svelte";
 	import { tick } from "svelte";

diff --git a/src/lib/components/dialogs/CalendarAddDialog.svelte b/src/lib/components/dialogs/CalendarAddDialog.svelte
@@ -7,7 +7,7 @@
 	import "@material/web/button/text-button";
 	import "@material/web/button/filled-tonal-button";
 	import { type MdFilledTextField } from "@material/web/textfield/filled-text-field";
-	import CalendarMonthIcon from "$lib/components/icons/CalendarMonthIcon.svelte";
+	import CalendarMonthIcon from "~icons/material-symbols/calendar-month-rounded";
 
 	import { generateRandomID, type Calendar } from "$lib/calendars";
 	import { bindValue } from "$lib/actions/bindValue";

diff --git a/src/lib/components/dialogs/CalendarDeleteDialog.svelte b/src/lib/components/dialogs/CalendarDeleteDialog.svelte
@@ -7,7 +7,7 @@
 	import "@material/web/textfield/outlined-text-field";
 	import "@material/web/button/text-button";
 	import "@material/web/button/filled-tonal-button";
-	import DeleteIcon from "$lib/components/icons/DeleteIcon.svelte";
+	import DeleteIcon from "~icons/material-symbols/delete-rounded";
 
 	import type { Calendar } from "$lib/calendars";
 

diff --git a/src/lib/components/dialogs/CalendarEditDialog.svelte b/src/lib/components/dialogs/CalendarEditDialog.svelte
@@ -7,7 +7,7 @@
 	import "@material/web/button/text-button";
 	import "@material/web/button/filled-tonal-button";
 	import "@material/web/textfield/outlined-text-field";
-	import EditIcon from "$lib/components/icons/EditIcon.svelte";
+	import EditIcon from "~icons/material-symbols/edit-rounded";
 
 	import type { Calendar, CalendarChanges } from "$lib/calendars";
 	import { bindValue } from "$lib/actions/bindValue";

diff --git a/src/lib/components/dialogs/CalendarEventAddDialog.svelte b/src/lib/components/dialogs/CalendarEventAddDialog.svelte
@@ -11,7 +11,7 @@
 	import { type MdFilledTextField } from "@material/web/textfield/filled-text-field";
 	import "@material/web/checkbox/checkbox";
 	import { type MdDialog } from "@material/web/dialog/dialog";
-	import EventIcon from "$lib/components/icons/EventIcon.svelte";
+	import EventIcon from "~icons/material-symbols/event-rounded";
 
 	import DatePicker from "$lib/components/DatePicker.svelte";
 	import TimePicker from "$lib/components/TimePicker.svelte";

diff --git a/src/lib/components/dialogs/CalendarEventDeleteDialog.svelte b/src/lib/components/dialogs/CalendarEventDeleteDialog.svelte
@@ -8,7 +8,7 @@
 	import "@material/web/textfield/outlined-text-field";
 	import "@material/web/button/text-button";
 	import "@material/web/button/filled-tonal-button";
-	import DeleteIcon from "$lib/components/icons/DeleteIcon.svelte";
+	import DeleteIcon from "~icons/material-symbols/delete-rounded";
 
 	import { zonedDateTimeToICALJsonData, type ComputedCalendarEvent } from "$lib/calendars";
 	import { EventDeleteMode, type DeleteCalendarEventOptions } from "$lib/webxdc/shared";

diff --git a/src/lib/components/dialogs/CalendarEventEditDialog.svelte b/src/lib/components/dialogs/CalendarEventEditDialog.svelte
@@ -12,7 +12,7 @@
 	import { type MdFilledTextField } from "@material/web/textfield/filled-text-field";
 	import "@material/web/checkbox/checkbox";
 	import { type MdDialog } from "@material/web/dialog/dialog";
-	import EventIcon from "$lib/components/icons/EventIcon.svelte";
+	import EventIcon from "~icons/material-symbols/event-rounded";
 
 	import Menu from "$lib/components/Menu.svelte";
 	import MenuItem from "$lib/components/MenuItem.svelte";

diff --git a/src/lib/components/dialogs/ICALExportDialog.svelte b/src/lib/components/dialogs/ICALExportDialog.svelte
@@ -5,7 +5,7 @@
 	import { type MdDialog } from "@material/web/dialog/dialog";
 	import "@material/web/iconbutton/icon-button";
 	import "@material/web/button/text-button";
-	import DownloadIcon from "../icons/DownloadIcon.svelte";
+	import DownloadIcon from "~icons/material-symbols/download";
 
 	import Menu from "../Menu.svelte";
 	import MenuItem from "../MenuItem.svelte";

diff --git a/src/lib/components/dialogs/ICALImportDialog.svelte b/src/lib/components/dialogs/ICALImportDialog.svelte
@@ -6,10 +6,10 @@
 	import { type MdDialog } from "@material/web/dialog/dialog";
 	import "@material/web/iconbutton/icon-button";
 	import "@material/web/button/text-button";
-	import UploadFileIcon from "$lib/components/icons/UploadFileIcon.svelte";
+	import UploadFileIcon from "~icons/material-symbols/upload-file-outline-rounded";
 
 	import { type Calendar, icalComponentToCalendar } from "$lib/calendars";
-	import UploadIcon from "../icons/UploadIcon.svelte";
+	import UploadIcon from "~icons/material-symbols/upload";
 
 	const calendarFunctions = getContext("calendarFunctions");
 

diff --git a/src/lib/components/fabs/AddFab.svelte b/src/lib/components/fabs/AddFab.svelte
@@ -2,9 +2,9 @@
 	import { fade } from "svelte/transition";
 
 	import "@material/web/fab/fab";
-	import AddIcon from "$lib/components/icons/AddIcon.svelte";
-	import EventIcon from "$lib/components/icons/EventIcon.svelte";
-	import CalendarMonthIcon from "$lib/components/icons/CalendarMonthIcon.svelte";
+	import AddIcon from "~icons/material-symbols/add-rounded";
+	import EventIcon from "~icons/material-symbols/event-rounded";
+	import CalendarMonthIcon from "~icons/material-symbols/calendar-month-rounded";
 
 	import CalendarAddDialog from "../dialogs/CalendarAddDialog.svelte";
 	import CalendarEventAddDialog from "../dialogs/CalendarEventAddDialog.svelte";

diff --git a/src/lib/components/fabs/DeleteEventFab.svelte b/src/lib/components/fabs/DeleteEventFab.svelte
@@ -2,7 +2,7 @@
 	import type { Readable } from "svelte/store";
 
 	import "@material/web/fab/fab";
-	import DeleteIcon from "$lib/components/icons/DeleteIcon.svelte";
+	import DeleteIcon from "~icons/material-symbols/delete-rounded";
 
 	import type { ComputedCalendarEvent } from "$lib/calendars";
 	import CalendarEventDeleteDialog from "../dialogs/CalendarEventDeleteDialog.svelte";

diff --git a/src/lib/components/fabs/EditEventFab.svelte b/src/lib/components/fabs/EditEventFab.svelte
@@ -2,7 +2,7 @@
 	import type { Readable } from "svelte/store";
 
 	import "@material/web/fab/fab";
-	import EditIcon from "$lib/components/icons/EditIcon.svelte";
+	import EditIcon from "~icons/material-symbols/edit-rounded";
 
 	import type { ComputedCalendarEvent } from "$lib/calendars";
 	import CalendarEventEditDialog from "../dialogs/CalendarEventEditDialog.svelte";

diff --git a/src/lib/components/icons/AddIcon.svelte b/src/lib/components/icons/AddIcon.svelte
diff --git a/src/lib/components/icons/ArrowDropDownIcon.svelte b/src/lib/components/icons/ArrowDropDownIcon.svelte
diff --git a/src/lib/components/icons/ArrowRightIcon.svelte b/src/lib/components/icons/ArrowRightIcon.svelte
diff --git a/src/lib/components/icons/CalendarMonthIcon.svelte b/src/lib/components/icons/CalendarMonthIcon.svelte
diff --git a/src/lib/components/icons/CalendarTodayIcon.svelte b/src/lib/components/icons/CalendarTodayIcon.svelte
diff --git a/src/lib/components/icons/CalendarViewDayIcon.svelte b/src/lib/components/icons/CalendarViewDayIcon.svelte
diff --git a/src/lib/components/icons/CalendarViewMonthIcon.svelte b/src/lib/components/icons/CalendarViewMonthIcon.svelte
diff --git a/src/lib/components/icons/CalendarViewWeekIcon.svelte b/src/lib/components/icons/CalendarViewWeekIcon.svelte
diff --git a/src/lib/components/icons/ChevronLeftIcon.svelte b/src/lib/components/icons/ChevronLeftIcon.svelte
diff --git a/src/lib/components/icons/ChevronRightIcon.svelte b/src/lib/components/icons/ChevronRightIcon.svelte
diff --git a/src/lib/components/icons/DarkModeIcon.svelte b/src/lib/components/icons/DarkModeIcon.svelte
diff --git a/src/lib/components/icons/DeleteIcon.svelte b/src/lib/components/icons/DeleteIcon.svelte
diff --git a/src/lib/components/icons/DescriptionIcon.svelte b/src/lib/components/icons/DescriptionIcon.svelte
diff --git a/src/lib/components/icons/DownloadIcon.svelte b/src/lib/components/icons/DownloadIcon.svelte