refactor: replace unplugin-icons with unocss

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
jellyfin · Jan 24, 2025 · 88a5eab · 88a5eab
1 parent f557c3e
commit 88a5eab
Show file tree

Hide file tree

Showing 58 changed files with 366 additions and 684 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -63,7 +63,6 @@
     "browserslist": "4.24.4",
     "lightningcss": "1.28.2",
     "unocss": "0.65.4",
-    "unplugin-icons": "22.0.0",
     "unplugin-vue-components": "28.0.0",
     "unplugin-vue-router": "0.10.9",
     "vite": "6.0.7",

diff --git a/frontend/src/components/Buttons/FilterButton.vue b/frontend/src/components/Buttons/FilterButton.vue
@@ -3,10 +3,8 @@
     class="ma-2"
     :icon="$vuetify.display.smAndDown">
     {{ !$vuetify.display.smAndDown ? t('filter') : undefined }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiFilterVariant v-else />
-    </VIcon>
+    <JIcon
+      :class="$vuetify.display.smAndDown ? 'mdi-filter-variant' : 'i-mdi:menu-down'" />
     <VMenu
       :disabled="disabled"
       :close-on-content-click="false"

diff --git a/frontend/src/components/Buttons/LikeButton.vue b/frontend/src/components/Buttons/LikeButton.vue
@@ -1,17 +1,17 @@
 <template>
   <VBtn
-    :icon="isFavorite ? IMdiHeart : IMdiHeartOutline"
+    icon
     :size="size"
     :color="isFavorite ? 'primary' : undefined"
     :loading="loading"
-    @click.stop.prevent="isFavorite = !isFavorite" />
+    @click.stop.prevent="isFavorite = !isFavorite">
+    <JIcon :class="isFavorite ? 'i-mdi:heart' : 'i-mdi:heart-outline'" />
+  </VBtn>
 </template>
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api';
-import IMdiHeart from 'virtual:icons/mdi/heart';
-import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
 import { useApi } from '#/composables/apis';
 

diff --git a/frontend/src/components/Buttons/MarkPlayedButton.vue b/frontend/src/components/Buttons/MarkPlayedButton.vue
@@ -2,16 +2,17 @@
   <VBtn
     v-if="canMarkWatched(item)"
     :color="isPlayed ? 'primary' : undefined"
-    :icon="IMdiCheck"
+    icon
     :loading="loading"
     size="small"
-    @click.stop.prevent="isPlayed = !isPlayed" />
+    @click.stop.prevent="isPlayed = !isPlayed">
+    <JIcon class="i-mdi:check" />
+  </VBtn>
 </template>
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
-import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed, ref } from 'vue';
 import { canMarkWatched } from '#/utils/items';
 import { useApi } from '#/composables/apis';

diff --git a/frontend/src/components/Buttons/Playback/NextTrackButton.vue b/frontend/src/components/Buttons/Playback/NextTrackButton.vue
@@ -4,9 +4,9 @@
     icon
     :disabled="!playbackManager.nextItem.value"
     @click="playbackManager.setNextItem">
-    <VIcon v-bind="$attrs">
-      <IMdiSkipNext />
-    </VIcon>
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:skip-next" />
   </VBtn>
 </template>
 

diff --git a/frontend/src/components/Buttons/Playback/PlayButton.vue b/frontend/src/components/Buttons/Playback/PlayButton.vue
@@ -8,16 +8,12 @@
       :loading="loading"
       :disabled="disabled"
       @click.prevent="playOrResume">
-      <VIcon
+      <JIcon
         v-if="shuffle"
-        :size="fab ? 36 : undefined">
-        <IMdiShuffle />
-      </VIcon>
-      <VIcon
+        class="i-mdi-shuffle" />
+      <JIcon
         v-else
-        :size="fab ? 36 : undefined">
-        <IMdiPlay />
-      </VIcon>
+        class="i-mdi-play" />
     </VBtn>
     <VBtn
       v-else-if="!fab"

diff --git a/frontend/src/components/Buttons/Playback/PlayPauseButton.vue b/frontend/src/components/Buttons/Playback/PlayPauseButton.vue
@@ -3,27 +3,17 @@
     v-bind="$attrs"
     icon
     :loading="playbackManager.isBuffering.value"
-    @click="playbackManager.playPause">
-    <VIcon
+    @click.passive="playbackManager.playPause">
+    <JIcon
       v-bind="$attrs"
-      :icon="playPauseIcon" />
+      :class="{
+        'i-mdi:exclamation': playbackManager.status.value === PlaybackStatus.Error,
+        'i-mdi:play-circle-outline': playbackManager.isPaused.value,
+        'i-mdi:pause-circle-outline': !playbackManager.isPaused.value,
+      }" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiExclamation from 'virtual:icons/mdi/exclamation';
-import IMdiPauseCircleOutline from 'virtual:icons/mdi/pause-circle-outline';
-import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
-import { computed } from 'vue';
 import { PlaybackStatus, playbackManager } from '#/store/playback-manager';
-
-const playPauseIcon = computed(() => {
-  if (playbackManager.isPaused.value) {
-    return IMdiPlayCircleOutline;
-  } else if (playbackManager.status.value === PlaybackStatus.Error) {
-    return IMdiExclamation;
-  }
-
-  return IMdiPauseCircleOutline;
-});
 </script>
diff --git a/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue
@@ -2,9 +2,7 @@
   <VBtn
     icon
     class="align-self-center">
-    <VIcon>
-      <IMdiCog />
-    </VIcon>
+    <JIcon class="i-mdi:cog" />
     <VTooltip
       :text="$t('playbackSettings')"
       location="top" />

diff --git a/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue b/frontend/src/components/Buttons/Playback/PreviousTrackButton.vue
@@ -2,15 +2,14 @@
   <VBtn
     v-bind="$attrs"
     icon
-    @click="() => playbackManager.setPreviousItem()"
-    @dblclick="() => playbackManager.setPreviousItem(true)">
-    <VIcon v-bind="$attrs">
-      <IMdiSkipPrevious />
-    </VIcon>
+    @click.passive="() => playbackManager.setPreviousItem()"
+    @dblclick.passive="() => playbackManager.setPreviousItem(true)">
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:skip-previous" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
 import { playbackManager } from '#/store/playback-manager';
 </script>
diff --git a/frontend/src/components/Buttons/Playback/RepeatButton.vue b/frontend/src/components/Buttons/Playback/RepeatButton.vue
@@ -3,22 +3,13 @@
     v-bind="$attrs"
     icon
     :color="playbackManager.isRepeating.value ? 'primary' : undefined"
-    @click="playbackManager.toggleRepeatMode">
-    <VIcon
+    @click.passive="playbackManager.toggleRepeatMode">
+    <JIcon
       v-bind="$attrs"
-      :icon="repeatIcon" />
+      :class="playbackManager.repeatMode.value === RepeatMode.RepeatOne ? 'i-mdi:repeat-once' : 'i-mdi:repeat'" />
   </VBtn>
 </template>
 
 <script setup lang="ts">
-import IMdiRepeat from 'virtual:icons/mdi/repeat';
-import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
-import { computed } from 'vue';
 import { RepeatMode, playbackManager } from '#/store/playback-manager';
-
-const repeatIcon = computed(() =>
-  playbackManager.repeatMode.value === RepeatMode.RepeatOne
-    ? IMdiRepeatOnce
-    : IMdiRepeat
-);
 </script>
diff --git a/frontend/src/components/Buttons/Playback/ShuffleButton.vue b/frontend/src/components/Buttons/Playback/ShuffleButton.vue
@@ -4,9 +4,9 @@
     icon
     :color="playbackManager.isShuffling.value ? 'primary' : undefined"
     @click="playbackManager.toggleShuffle">
-    <VIcon v-bind="$attrs">
-      <IMdiShuffle />
-    </VIcon>
+    <JIcon
+      v-bind="$attrs"
+      class="i-mdi:shuffle" />
   </VBtn>
 </template>
 

diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
@@ -2,9 +2,7 @@
   <VBtn
     icon
     class="align-self-center">
-    <VIcon>
-      <IMdiPlaylistPlay />
-    </VIcon>
+    <JIcon class="i-mdi:playlist-play" />
     <VTooltip
       :text="$t('queue')"
       location="top" />
@@ -22,9 +20,9 @@
                 <BlurhashImage
                   v-if="playbackManager.initiator.value"
                   :item="playbackManager.initiator.value" />
-                <VIcon
+                <JIcon
                   v-else
-                  :icon="modeIcon" />
+                  :class="modeIcon" />
               </VAvatar>
             </template>
             <template #subtitle>
@@ -46,19 +44,15 @@
           <VBtn
             icon
             @click="playbackManager.stop">
-            <VIcon>
-              <IMdiPlaylistRemove />
-            </VIcon>
+            <JIcon class="i-mdi:playlist-remove" />
             <VTooltip
               :text="$t('clearQueue')"
               location="top" />
           </VBtn>
           <VBtn
             icon
             disabled>
-            <VIcon>
-              <IMdiContentSave />
-            </VIcon>
+            <JIcon class="i-mdi:content-save" />
             <VTooltip
               :text="$t('saveAsPlaylist')"
               location="top" />
@@ -71,8 +65,6 @@
 </template>
 
 <script setup lang="ts">
-import IMdiPlaylistMusic from 'virtual:icons/mdi/playlist-music';
-import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { getTotalEndsAtTime } from '#/utils/time';
@@ -123,8 +115,8 @@ const sourceText = computed(() => {
 
 const modeIcon = computed(() =>
   playbackManager.playbackInitMode.value === InitMode.Shuffle
-    ? IMdiShuffle
-    : IMdiPlaylistMusic
+    ? 'i-mdi:shuffle'
+    : 'i-mdi:playlist-music'
 );
 </script>
 

diff --git a/frontend/src/components/Buttons/ScrollToTopButton.vue b/frontend/src/components/Buttons/ScrollToTopButton.vue
@@ -8,10 +8,8 @@
       location="bottom right"
       position="fixed"
       variant="elevated"
-      @click="scrollToTop">
-      <VIcon>
-        <IMdiChevronUp />
-      </VIcon>
+      @click.passive="scrollToTop">
+      <JIcon class="i-mdi:chevron-up" />
     </VBtn>
   </JTransition>
 </template>

diff --git a/frontend/src/components/Buttons/SortButton.vue b/frontend/src/components/Buttons/SortButton.vue
@@ -3,23 +3,24 @@
     icon
     :disabled="disabled"
     @click="emit('change', model[0], !ascending)">
-    <VIcon v-if="ascending">
-      <IMdiSortAscending />
-    </VIcon>
-    <VIcon v-else>
-      <IMdiSortDescending />
-    </VIcon>
+    <JIcon
+      v-if="ascending"
+      :class="ascending ? 'i-mdi:sort-ascending' : 'i-mdi:sort-descending'" />
   </VBtn>
   <VBtn class="my-2">
     {{ !$vuetify.display.smAndDown ? sortingLabel : undefined }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiSortAlphabeticalVariant
-        v-else-if="model.length === 0 || model[0] === items[0].value" />
-      <IMdiNumeric9PlusBoxOutline
-        v-else-if="model[0] === items[1].value" />
-      <IMdiCalendarRange v-else-if="model[0] === items[2].value" />
-    </VIcon>
+    <JIcon
+      v-if="!$vuetify.display.smAndDown"
+      class="i-mdi:menu-down" />
+    <JIcon
+      v-else-if="model.length === 0 || model[0] === items[0].value"
+      class="i-mdi:sort-alphabetical-variant" />
+    <JIcon
+      v-else-if="model[0] === items[1].value"
+      class="i-mdi:numeric-9-plus-box-outline" />
+    <JIcon
+      v-else-if="model[0] === items[2].value"
+      class="i-mdi:calendar-range" />
     <VMenu :disabled="disabled">
       <VList
         v-model:selected="model"

diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -6,10 +6,11 @@
       !playerElement.currentItemParsedSubtitleTracks.value ||
         playerElement.currentItemParsedSubtitleTracks.value.length === 0
     ">
-    <VIcon>
-      <IMdiClosedCaption v-if="playbackManager.currentSubtitleTrack.value" />
-      <IMdiClosedCaptionOutline v-else />
-    </VIcon>
+    <JIcon
+      :class="{
+        'i-mdi:closed-caption': playbackManager.currentSubtitleTrack.value,
+        'i-mdi:closed-caption-outline': !playbackManager.currentSubtitleTrack.value
+      }" />
     <VTooltip
       :text="$t('subtitles')"
       location="top" />
@@ -22,23 +23,23 @@
         <VListItem
           v-for="track of tracks"
           :key="track.srcIndex"
-          :append-icon="
-            track.srcIndex === playbackManager.currentSubtitleTrack.value?.Index
-              ? IMdiCheck
-              : undefined
-          "
           :title="track.label"
           @click="
             playbackManager.currentSubtitleTrack.value = track.srcIndex
-          " />
+          ">
+          <template
+            v-if="track.srcIndex === playbackManager.currentSubtitleTrack.value?.Index"
+            #prepend>
+            <JIcon class="i-mdi:check uno-w-10" />
+          </template>
+        </VListItem>
       </VList>
     </VMenu>
   </VBtn>
 </template>
 
 <script setup lang="ts">
 import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
-import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { playbackManager } from '#/store/playback-manager';

diff --git a/frontend/src/components/Buttons/TypeButton.vue b/frontend/src/components/Buttons/TypeButton.vue
@@ -9,10 +9,11 @@
           ? items[0].title
           : items.find((i) => i.value === innerModel[0])?.title
     }}
-    <VIcon :end="!$vuetify.display.smAndDown">
-      <IMdiMenuDown v-if="!$vuetify.display.smAndDown" />
-      <IMdiEye v-else />
-    </VIcon>
+    <JIcon
+      :class="{
+        'i-mdi:menu-down': !$vuetify.display.smAndDown,
+        'i-mdi:eye': $vuetify.display.smAndDown
+      }" />
     <VMenu>
       <VList
         :items="items"

diff --git a/frontend/src/components/Dialogs/GenericDialog.vue b/frontend/src/components/Dialogs/GenericDialog.vue
@@ -20,7 +20,7 @@
           <VBtn
             icon
             @click="model = false">
-            <IMdiClose />
+            <JIcon class="i-mdi:close" />
           </VBtn>
         </template>
         <VToolbarTitle>