♻️ Move from .vue files to Lucide for icons

package-lock.json

@@ -7,8 +7,10 @@
     "": {
       "name": "timetable-v2",
       "version": "0.0.0",
+      "license": "GPL-3.0-or-later",
       "dependencies": {
         "dayjs": "^1.11.3",
+        "lucide-vue-next": "^0.233.0",
         "swiper": "^9.3.2",
         "vite-plugin-git-revision": "^0.1.9",
         "vue": "^3.2.37",
@@ -4417,6 +4419,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-vue-next": {
+      "version": "0.233.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.233.0.tgz",
+      "integrity": "sha512-cZbLMXQLMLy5i9ax/6wc0IP9gknAhWfLNdlBzUaRmmG3pUCDvGhTy86pu2/G1mGo94S+wSc6ILcqgvo4Qys2aw==",
+      "peerDependencies": {
+        "vue": ">=3.0.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "dayjs": "^1.11.3",
+    "lucide-vue-next": "^0.233.0",
     "swiper": "^9.3.2",
     "vite-plugin-git-revision": "^0.1.9",
     "vue": "^3.2.37",

src/components/bottom-navbar.vue

@@ -1,7 +1,5 @@
 <script setup>
-import CalendarIcon from "./icons/calendar-icon.vue";
+import { CalendarIcon, BellIcon, ClockIcon } from "lucide-vue-next";
-import BellIcon from "./icons/bell-icon.vue";
-import ClockIcon from "./icons/clock-icon.vue";
 import { RouterLink } from "vue-router";
 </script>
 
@@ -9,19 +7,19 @@ import { RouterLink } from "vue-router";
   <div class="bottomnav">
     <div class="entry">
       <RouterLink to="/timetable">
-        <CalendarIcon class="icon" />
+        <CalendarIcon size="30" class="icon" />
         <span class="title">{{ $t("title.timetable") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/substitutions">
-        <BellIcon class="icon" />
+        <BellIcon size="30" class="icon" />
         <span class="title">{{ $t("title.substitutions") }}</span>
       </RouterLink>
     </div>
     <div class="entry">
       <RouterLink to="/history">
-        <ClockIcon class="icon" />
+        <ClockIcon size="30" class="icon" />
         <span class="title">{{ $t("title.history") }}</span>
       </RouterLink>
     </div>

src/components/date-selector.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { selectedDate, selectedDay, changeDay, changeDate } from "../store";
-import ArrowIcon from "./icons/arrow-icon.vue";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-vue-next";
 import dayjs from "dayjs";
 import { getDateSkippingWeekend } from "../util";
 
@@ -17,7 +17,7 @@ const dayNames = [
 
 <template>
   <div class="selector">
-    <ArrowIcon @click="changeDay--" />
+    <ArrowLeftIcon @click="changeDay--" />
     <span
       class="day"
       @click="changeDate = getDateSkippingWeekend(dayjs().toDate(), true)"
@@ -25,7 +25,7 @@ const dayNames = [
       {{ $t(dayNames[selectedDay + 1]) }},
       {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
     </span>
-    <ArrowIcon style="transform: rotate(180deg)" @click="changeDay++" />
+    <ArrowRightIcon @click="changeDay++" />
   </div>
 </template>
 

src/components/history-list.vue

@@ -4,8 +4,7 @@ import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
 import InfoCard from "./info-card.vue";
-import ClockIconBig from "./icons/clock-icon-big.vue";
+import { ClockIcon, AlarmClockOffIcon } from "lucide-vue-next";
-import ClockOffIcon from "./icons/clock-off-icon.vue";
 
 const props = defineProps({
   date: {
@@ -27,13 +26,13 @@ const chars = {
 <template>
   <InfoCard
     v-show="typeof historyOfDate == 'undefined'"
-    :icon="ClockIconBig"
+    :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
   />
   <InfoCard
     v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
-    :icon="ClockOffIcon"
+    :icon="AlarmClockOffIcon"
     :title="$t('infoCard.titles.noHistory')"
     :text="$t('infoCard.texts.noHistory')"
   />

src/components/icons/arrow-icon.vue

@@ -1,19 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-arrow-left"
-  >
-    <line x1="19" y1="12" x2="5" y2="12"></line>
-    <polyline points="12 19 5 12 12 5"></polyline>
-  </svg>
-</template>

src/components/icons/bell-icon.vue

@@ -1,19 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-bell"
-  >
-    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
-    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-  </svg>
-</template>

src/components/icons/bell-off-icon.vue

@@ -1,22 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-bell-off"
-  >
-    <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
-    <path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
-    <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
-    <path d="M18 8a6 6 0 0 0-9.33-5"></path>
-    <line x1="1" y1="1" x2="23" y2="23"></line>
-  </svg>
-</template>

src/components/icons/calendar-icon.vue

@@ -1,21 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-calendar"
-  >
-    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-    <line x1="16" y1="2" x2="16" y2="6"></line>
-    <line x1="8" y1="2" x2="8" y2="6"></line>
-    <line x1="3" y1="10" x2="21" y2="10"></line>
-  </svg>
-</template>

src/components/icons/clipboard-copy-icon.vue

@@ -1,21 +0,0 @@
-<!-- From https://github.com/lucide-icons/lucide -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
-    <path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path>
-    <path d="M16 4h2a2 2 0 0 1 2 2v4"></path>
-    <path d="M21 14H11"></path>
-    <path d="m15 10-4 4 4 4"></path>
-  </svg>
-</template>

src/components/icons/clock-icon-big.vue

@@ -1,19 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-clock"
-  >
-    <circle cx="12" cy="12" r="10"></circle>
-    <polyline points="12 6 12 12 16 14"></polyline>
-  </svg>
-</template>

src/components/icons/clock-icon.vue

@@ -1,19 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-clock"
-  >
-    <circle cx="12" cy="12" r="10"></circle>
-    <polyline points="12 6 12 12 16 14"></polyline>
-  </svg>
-</template>

src/components/icons/clock-off-icon.vue

@@ -1,24 +0,0 @@
-<!-- From https://github.com/lucide-icons/lucide -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="30"
-    height="30"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.8"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    <path d="M6.87 6.87a8 8 0 1 0 11.26 11.26"></path>
-    <path
-      d="M19.9 14.25A7.44 7.44 0 0 0 20 13a8 8 0 0 0-8-8 7.44 7.44 0 0 0-1.25.1"
-    ></path>
-    <path d="m22 6-3-3"></path>
-    <path d="m6 19-2 2"></path>
-    <path d="m2 2 20 20"></path>
-    <path d="M4 4 2 6"></path>
-  </svg>
-</template>

src/components/icons/menu-icon.vue

@@ -1,20 +0,0 @@
-<!-- From https://github.com/feathericons/feather -->
-
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="26"
-    height="26"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="2"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    class="feather feather-menu"
-  >
-    <line x1="3" y1="12" x2="21" y2="12"></line>
-    <line x1="3" y1="6" x2="21" y2="6"></line>
-    <line x1="3" y1="18" x2="21" y2="18"></line>
-  </svg>
-</template>

src/components/substitution-list.vue

@@ -3,8 +3,7 @@ import { substitutions } from "../store";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
 import InfoCard from "./info-card.vue";
-import BellOffIcon from "./icons/bell-off-icon.vue";
+import { BellOffIcon, ClockIcon } from "lucide-vue-next";
-import ClockIconBig from "./icons/clock-icon-big.vue";
 
 const props = defineProps({
   date: {
@@ -20,7 +19,7 @@ const substitutionsForDate = computed(() => {
 <template>
   <InfoCard
     v-show="typeof substitutionsForDate == 'undefined'"
-    :icon="ClockIconBig"
+    :icon="ClockIcon"
     :title="$t('infoCard.titles.loading')"
     :text="$t('infoCard.texts.loading')"
   />

src/components/timetable-setup.vue

@@ -1,5 +1,5 @@
 <script setup>
-import CalendarIcon from "./icons/calendar-icon.vue";
+import { CalendarIcon } from "lucide-vue-next";
 
 defineProps({
   options: {

src/components/titlebar-element.vue

@@ -1,5 +1,5 @@
 <script setup>
-import MenuIcon from "./icons/menu-icon.vue";
+import { MenuIcon } from "lucide-vue-next";
 import { computed } from "vue";
 import { useRoute, useRouter, RouterLink } from "vue-router";
 import { lastRoute } from "../store";

src/views/TokenView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import clipboardCopyIcon from "../components/icons/clipboard-copy-icon.vue";
+import { ClipboardCopyIcon } from "lucide-vue-next";
 
 const password = ref("");
 const token = ref("");
@@ -49,7 +49,7 @@ function copy() {
         ref="token_element"
         v-bind:value="token.token"
       />
-      <clipboardCopyIcon />
+      <ClipboardCopyIcon />
     </div>
   </div>
 </template>