refactor: changed icons library

package.json

@@ -12,8 +12,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@heroicons/vue": "^2.2.0",
     "axios": "^1.4.0",
+    "lucide-vue-next": "^0.487.0",
     "pinia": "^2.0.17",
     "prettier": "^3.0.3",
     "vue": "^3.2.37",

src/components/tabs/StorageTab.vue

@@ -16,19 +16,16 @@
 
               <div class="storage-item-top-actions">
                 <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
-                  <ArrowRightEndOnRectangleIcon style="width: 25px" />
+                  <LogIn />
                 </button>
 
                 <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
-                  <ChevronDownIcon
-                    v-if="!expandedEntries.includes(storageEntry.id)"
-                    style="width: 25px"
-                  />
-                  <ChevronUpIcon v-else style="width: 25px" />
+                  <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
+                  <ChevronUp v-else />
                 </button>
 
                 <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
-                  <TrashIcon style="width: 25px" />
+                  <Trash2 />
                 </button>
               </div>
             </div>
@@ -62,24 +59,16 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 
-import {
-  ArrowRightEndOnRectangleIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  FolderArrowDownIcon,
-  TrashIcon,
-} from '@heroicons/vue/20/solid';
-
 import { useStore } from '../../store';
 import stockMixin from '../../mixins/stockMixin';
+import { ChevronDown, ChevronUp, LogIn, Trash2 } from 'lucide-vue-next';
 
 export default defineComponent({
   components: {
-    ChevronDownIcon,
-    ChevronUpIcon,
-    FolderArrowDownIcon,
-    TrashIcon,
-    ArrowRightEndOnRectangleIcon,
+    ChevronDown,
+    ChevronUp,
+    LogIn,
+    Trash2,
   },
 
   mixins: [stockMixin],
@@ -112,7 +101,9 @@ export default defineComponent({
           },
           new Map() as Map<string, number>
         )
-      ).map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`).join(', ');
+      )
+        .map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`)
+        .join(', ');
     },
     removeStockIndexFromStorage(stockName: string) {
       let removeConfirm = confirm(this.$t('storage.remove-confirm'));
@@ -188,7 +179,6 @@ ul.storage-list > li {
 }
 
 .storage-item-top > h3 {
-  font-size: 1.2em;
   width: 100%;
   text-align: left;
   margin: 0;

src/components/tabs/stock-list/StockActions.vue

@@ -7,7 +7,7 @@
         :data-button-tooltip="$t('stocklist.action-upload-file')"
       >
         <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
-        <FolderPlusIcon />
+        <FolderUp :stroke-width="2.5" />
       </button>
 
       <button
@@ -15,7 +15,7 @@
         @click="uploadStockFromClipboard"
         :data-button-tooltip="$t('stocklist.action-upload-clipboard')"
       >
-        <ClipboardDocumentCheckIcon />
+        <ClipboardPaste :stroke-width="2.5" />
       </button>
 
       <button
@@ -25,7 +25,7 @@
         @click="downloadStock"
         :data-button-tooltip="$t('stocklist.action-download')"
       >
-        <ArrowDownTrayIcon />
+        <FolderDown :stroke-width="2.5" />
       </button>
 
       <button
@@ -35,7 +35,7 @@
         @click="copyToClipboard"
         :data-button-tooltip="$t('stocklist.action-copy')"
       >
-        <DocumentDuplicateIcon />
+        <ClipboardCopy :stroke-width="2.5" />
       </button>
 
       <button
@@ -45,7 +45,7 @@
         @click="saveStockDataToStorage"
         :data-button-tooltip="$t('stocklist.action-bookmark')"
       >
-        <BookmarkIcon />
+        <Bookmark :stroke-width="2.5" />
       </button>
 
       <button
@@ -55,7 +55,7 @@
         @click="resetStock"
         :data-button-tooltip="$t('stocklist.action-reset')"
       >
-        <ArrowUturnLeftIcon />
+        <ListRestart :stroke-width="2.5" />
       </button>
 
       <button
@@ -65,7 +65,7 @@
         @click="shuffleCars"
         :data-button-tooltip="$t('stocklist.action-shuffle')"
       >
-        <ArrowPathIcon />
+        <Shuffle :stroke-width="2.5" />
       </button>
     </div>
 
@@ -75,7 +75,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.moveUpStock(store.chosenStockListIndex)"
       >
-        <ChevronUpIcon />
+        <ChevronUp :stroke-width="2.5" />
         {{ $t('stocklist.action-move-up') }}
       </button>
 
@@ -84,7 +84,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.moveDownStock(store.chosenStockListIndex)"
       >
-        <ChevronDownIcon />
+        <ChevronDown :stroke-width="2.5" />
         {{ $t('stocklist.action-move-down') }}
       </button>
 
@@ -93,7 +93,7 @@
         :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
         @click="stockListUtils.removeStock(store.chosenStockListIndex)"
       >
-        <TrashIcon />
+        <Trash2 :stroke-width="2.5" />
         {{ $t('stocklist.action-remove') }}
       </button>
     </div>
@@ -108,33 +108,38 @@ import { isTractionUnit } from '../../../utils/vehicleUtils';
 import { useFileUtils } from '../../../utils/fileUtils';
 import stockMixin from '../../../mixins/stockMixin';
 import { useStockListUtils } from '../../../utils/stockListUtils';
+
 import {
-  ArrowDownTrayIcon,
-  ArrowPathIcon,
-  ArrowUturnLeftIcon,
-  BookmarkIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ClipboardDocumentCheckIcon,
-  DocumentDuplicateIcon,
-  FolderPlusIcon,
-  TrashIcon,
-} from '@heroicons/vue/20/solid';
+  Bookmark,
+  ChevronDown,
+  ChevronUp,
+  ClipboardCopy,
+  ClipboardPaste,
+  Download,
+  FolderDown,
+  FolderUp,
+  ListRestart,
+  Repeat,
+  Shuffle,
+  Trash2,
+} from 'lucide-vue-next';
 
 export default defineComponent({
   mixins: [stockMixin],
 
   components: {
-    ArrowDownTrayIcon,
-    ArrowPathIcon,
-    ArrowUturnLeftIcon,
-    BookmarkIcon,
-    ChevronDownIcon,
-    ChevronUpIcon,
-    ClipboardDocumentCheckIcon,
-    DocumentDuplicateIcon,
-    FolderPlusIcon,
-    TrashIcon,
+    Bookmark,
+    ChevronDown,
+    ChevronUp,
+    ClipboardCopy,
+    ClipboardPaste,
+    Download,
+    FolderUp,
+    ListRestart,
+    Repeat,
+    Shuffle,
+    FolderDown,
+    Trash2,
   },
 
   data: () => ({

src/components/tabs/stock-list/StockSpecs.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="stock_specs">
+  <div class="stock-specs">
     <div v-if="store.chosenStorageStockName || chosenRealComposition">
-      <b class="bookmarked-stock-info" v-if="store.chosenStorageStockName">
+      <b v-if="store.chosenStorageStockName">
         <span
           class="text--accent"
           :title="store.chosenStorageStockName.length > 41 ? store.chosenStorageStockName : ''"
         >
-          <BookmarkIcon />
+          <BookmarkCheck :size="19" />
           {{ store.chosenStorageStockName.slice(0, 40) }}
           {{ store.chosenStorageStockName.length > 41 ? '...' : '' }}
         </span>
       </b>
+
       <span v-if="store.chosenStorageStockName && chosenRealComposition"> | </span>
+
       <b class="real-stock-info" v-if="chosenRealComposition">
         <span class="text--accent">
-          <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+          <img
+            class="real-stock-icon"
+            :src="getIconURL(chosenRealComposition.type)"
+            :alt="chosenRealComposition.type"
+          />
           {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
         </span>
       </b>
@@ -40,10 +46,10 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../../store';
 import imageMixin from '../../../mixins/imageMixin';
-import { BookmarkIcon } from '@heroicons/vue/20/solid';
+import { BookmarkCheck } from 'lucide-vue-next';
 
 export default defineComponent({
-  components: { BookmarkIcon },
+  components: { BookmarkCheck },
 
   mixins: [imageMixin],
 
@@ -62,11 +68,11 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.bookmarked-stock-info,
-.real-stock-info {
-  svg,
-  img {
-    height: 1.3ch;
-  }
+.real-stock-icon {
+  height: 1.3ch;
+}
+
+.stock-specs svg {
+  vertical-align: text-top;
 }
 </style>