From bd91e466fdb30e44249c87be67a650d5baa1e8b3 Mon Sep 17 00:00:00 2001
From: mikiher <mikiher@gmail.com>
Date: Thu, 20 Mar 2025 12:33:33 +0200
Subject: [PATCH] Don't use constructed tailwind classes in libraryIcon

---
 client/components/tables/library/LibraryItem.vue |  2 +-
 client/components/ui/LibraryIcon.vue             | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/components/tables/library/LibraryItem.vue b/client/components/tables/library/LibraryItem.vue
index 3b9d6fa0..7073f43a 100644
--- a/client/components/tables/library/LibraryItem.vue
+++ b/client/components/tables/library/LibraryItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white/10 flex items-center relative -mt-px" :class="selected ? 'bg-primary/50' : 'hover:bg-primary/25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
     <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
-    <ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="lg md:text-xl" :class="isHovering ? 'text-white/90' : 'text-white/50'" />
+    <ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="text-lg md:text-xl" :class="isHovering ? 'text-white/90' : 'text-white/50'" />
     <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white/50 animate-spin">
       <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
     </svg>
diff --git a/client/components/ui/LibraryIcon.vue b/client/components/ui/LibraryIcon.vue
index a615e84d..06abdc18 100644
--- a/client/components/ui/LibraryIcon.vue
+++ b/client/components/ui/LibraryIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="`h-${size} w-${size} min-w-${size} text-${fontSize}`" class="flex items-center justify-center">
+  <div :class="`${classList}`" class="flex items-center justify-center">
     <span class="abs-icons" :class="`icon-${iconToUse}`"></span>
   </div>
 </template>
@@ -13,7 +13,7 @@ export default {
     },
     fontSize: {
       type: String,
-      default: 'lg'
+      default: 'text-lg'
     },
     size: {
       type: Number,
@@ -24,6 +24,14 @@ export default {
     return {}
   },
   computed: {
+    classList() {
+      switch (this.size) {
+        case 6:
+          return `h-6 w-6 min-w-6 ${this.fontSize}`
+        default:
+          return `h-5 w-5 min-w-5 ${this.fontSize}`
+      }
+    },
     iconToUse() {
       return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf'
     },