fix: fix interop issue with @nuxt/icon

SegaraRai · Aug 18, 2024 · 9beaeb8 · 9beaeb8
1 parent bae5c1b
commit 9beaeb8
Show file tree

Hide file tree

Showing 48 changed files with 247 additions and 357 deletions.
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -95,15 +95,15 @@ const items = computed((): DropdownItem[][] => [
   [
     {
       label: `Luonto ${appVersion}`,
-      icon: "i-ph-github-logo-bold",
+      icon: "i-ph:github-logo-bold",
       href: "https://github.com/SegaraRai/luonto",
       target: "_blank",
     },
   ],
   [
     {
       label: "サインアウト",
-      icon: "i-ph-sign-out-bold",
+      icon: "i-ph:sign-out-bold",
       click: signOutHandler,
     },
   ],

diff --git a/app/components/NatureApplianceCardContent.vue b/app/components/NatureApplianceCardContent.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-row items-center gap-4">
     <div class="flex-1 flex flex-col items-center gap-4 overflow-hidden">
-      <div
+      <UIcon
+        :name="natureIconToClass(appliance.image)"
         class="w-24 h-24 text-gray-800 dark:text-gray-200"
-        :class="natureIconToClass(appliance.image)"
       />
       <div class="max-w-full truncate" v-text="appliance.nickname" />
     </div>
@@ -23,11 +23,11 @@
         class="flex-none text-sm font-bold flex items-center gap-1"
         :class="status.settings.class"
       >
-        <span
+        <UIcon
           v-if="status.settings.icon && status.settings.iconLabel"
           role="img"
           class="flex-none w-4 h-4"
-          :class="status.settings.icon"
+          :name="status.settings.icon"
           :aria-label="status.settings.iconLabel"
         />
         <span

diff --git a/app/components/NatureApplianceControlAC.vue b/app/components/NatureApplianceControlAC.vue
@@ -115,7 +115,7 @@
           size="sm"
           :color="isON ? 'primary' : 'gray'"
           variant="ghost"
-          icon="i-mdi-chevron-up"
+          icon="i-mdi:chevron-up"
           :disabled="disabled || !sliderUpButtonData.available"
           @click="swipeBy(1)"
         />
@@ -125,7 +125,7 @@
           size="sm"
           :color="isON ? 'primary' : 'gray'"
           variant="ghost"
-          icon="i-mdi-chevron-down"
+          icon="i-mdi:chevron-down"
           :disabled="disabled || !sliderDownButtonData.available"
           @click="swipeBy(-1)"
         />
@@ -139,7 +139,7 @@
         size="lg"
         :color="isON ? 'emerald' : 'gray'"
         variant="solid"
-        icon="i-mdi-power"
+        icon="i-mdi:power"
         :disabled="disabled"
         @click="sendSettings({ button: isON ? 'power-off' : 'power-on' })"
       />
@@ -155,7 +155,7 @@
           :disabled="disabled"
           @click="sendSettings({ operation_mode: mode })"
         >
-          <div class="w-5 h-5" :class="[icon, fgColor]" />
+          <UIcon :name="icon" class="w-5 h-5" :class="fgColor" />
           <div v-text="label" />
         </UButton>
       </template>

diff --git a/app/components/NatureApplianceDeviceInfo.vue b/app/components/NatureApplianceDeviceInfo.vue
@@ -12,10 +12,11 @@
     <div v-if="sensorItems.length" class="flex items-center gap-6">
       <template v-for="item in sensorItems" :key="item.label">
         <div v-if="item.available" class="flex items-center gap-2 text-sm">
-          <span
+          <UIcon
             role="img"
+            :name="item.icon"
             class="flex-none w-[1.25em] h-[1.25em]"
-            :class="[item.color, item.icon]"
+            :class="item.color"
             :aria-label="item.label"
           />
           <UTooltip

diff --git a/app/components/NatureDeviceCard.vue b/app/components/NatureDeviceCard.vue
@@ -6,9 +6,9 @@
     <UCard :class="[STYLE_CLICKABLE_CARD, STYLE_FOCUS_VISIBLE_RING_GROUP]">
       <div class="flex flex-row items-center gap-4">
         <div class="flex-1 flex flex-col items-center gap-4 overflow-hidden">
-          <div
+          <UIcon
+            :name="getNatureDeviceIcon(device)"
             class="w-20 h-20 text-gray-800 dark:text-gray-200"
-            :class="getNatureDeviceIcon(device)"
           />
           <div class="max-w-full truncate" v-text="device.name" />
         </div>

diff --git a/app/components/NatureDeviceSensorList.vue b/app/components/NatureDeviceSensorList.vue
@@ -5,10 +5,11 @@
   >
     <template v-for="item in items" :key="item.label">
       <div class="flex items-center gap-1">
-        <div
+        <UIcon
           role="img"
+          :name="item.icon"
           class="flex-none w-[1.25em] h-[1.25em]"
-          :class="[item.color, item.icon, !item.available && 'opacity-50']"
+          :class="[item.color, !item.available && 'opacity-50']"
           :aria-label="item.label"
         />
         <template v-if="item.available">

diff --git a/app/components/ThemeSelector.vue b/app/components/ThemeSelector.vue
@@ -46,17 +46,17 @@ const items = computed(() => [
       ? "システムテーマ"
       : `システムテーマ (${colorMode.value === "dark" ? "ダーク" : "ライト"})`,
     value: "system",
-    icon: "i-ph-circle-half-tilt-fill",
+    icon: "i-ph:circle-half-tilt-fill",
   },
   {
     label: "ライトテーマ",
     value: "light",
-    icon: "i-ph-circle dark:ix-ph-circle-fill",
+    icon: colorMode.value === "dark" ? "i-ph:circle-fill" : "i-ph:circle",
   },
   {
     label: "ダークテーマ",
     value: "dark",
-    icon: "i-ph-circle-fill dark:ix-ph-circle-bold",
+    icon: colorMode.value !== "dark" ? "i-ph:circle-fill" : "i-ph:circle",
   },
 ]);
 

diff --git a/app/pages/about.vue b/app/pages/about.vue
@@ -126,7 +126,7 @@
         to="/"
         aria-label="ホーム"
       >
-        <UIcon name="i-mdi-home" />
+        <UIcon name="i-mdi:home" />
       </ULink>
       <ULink
         class="inline-block rounded"
@@ -135,7 +135,7 @@
         target="_blank"
         aria-label="GitHub リポジトリ"
       >
-        <UIcon name="i-mdi-github" />
+        <UIcon name="i-mdi:github" />
       </ULink>
     </div>
   </div>

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -34,7 +34,7 @@
             class="rounded-full"
             :color="bulkPowerMode ? 'primary' : 'emerald'"
             variant="ghost"
-            :icon="bulkPowerMode ? 'i-mdi-check' : 'i-mdi-power'"
+            :icon="bulkPowerMode ? 'i-mdi:check' : 'i-mdi:power'"
             size="sm"
             @click="
               () => {

diff --git a/app/pages/signin.vue b/app/pages/signin.vue
@@ -35,16 +35,16 @@
               to="https://home.nature.global/"
               target="_blank"
             >
-              <UIcon class="text-lg" name="i-mdi-key-chain" />
+              <UIcon class="text-lg" name="i-mdi:key-chain" />
               アクセストークンの発行
-              <UIcon class="text-gray-400 -mt-0.5" name="i-mdi-external-link" />
+              <UIcon class="text-gray-400 -mt-0.5" name="i-mdi:external-link" />
             </ULink>
             <ULink
               class="inline-flex items-center gap-1 text-sky-400 rounded"
               :class="STYLE_FOCUS_VISIBLE_RING"
               to="/about"
             >
-              <UIcon class="text-lg" name="i-mdi-help-circle-outline" />
+              <UIcon class="text-lg" name="i-mdi:help-circle-outline" />
               このアプリについて
             </ULink>
           </div>

diff --git a/app/utils/natureConstantsAC.ts b/app/utils/natureConstantsAC.ts
@@ -39,35 +39,35 @@ export const AC_MODE_CONFIG_LIST: readonly ACModeConfig[] = [
     label: "自動",
     bgColor: "bg-gray-400/90",
     fgColor: "",
-    icon: "i-material-symbols-motion-photos-auto-outline",
+    icon: "i-material-symbols:motion-photos-auto-outline",
   },
   {
     mode: "blow",
     label: "送風",
     bgColor: "bg-gray-400/90",
     fgColor: "text-gray-400",
-    icon: "i-mdi-weather-windy",
+    icon: "i-mdi:weather-windy",
   },
   {
     mode: "cool",
     label: "冷房",
     bgColor: "bg-sky-400/90",
     fgColor: "text-sky-400",
-    icon: "i-mdi-snowflake",
+    icon: "i-mdi:snowflake",
   },
   {
     mode: "dry",
     label: "除湿",
     bgColor: "bg-blue-400/90",
     fgColor: "text-blue-400",
-    icon: "i-material-symbols-cool-to-dry",
+    icon: "i-material-symbols:cool-to-dry",
   },
   {
     mode: "warm",
     label: "暖房",
     bgColor: "bg-orange-400/90",
     fgColor: "text-orange-400",
-    icon: "i-mdi-fire",
+    icon: "i-mdi:fire",
   },
 ];
 
@@ -79,12 +79,12 @@ export const AC_FIXED_BUTTONS: readonly ACFixedButton[] = [
   {
     button: "airdir-swing",
     label: "スイング",
-    icon: "i-luonto-mdi-angle-sync",
+    icon: "i-luonto:mdi-angle-sync",
   },
   {
     button: "airdir-tilt",
     label: "固定",
-    icon: "i-luonto-mdi-angle-lock",
+    icon: "i-luonto:mdi-angle-lock",
   },
 ];
 
@@ -93,43 +93,43 @@ export const AC_DIR_OPTIONS: readonly ACDirOption[] = [
     value: "auto",
     label: "自動",
     shortcuts: ["A"],
-    icon: "i-luonto-mdi-angle-a",
+    icon: "i-luonto:mdi-angle-a",
   },
   {
     value: "swing",
     label: "スイング",
     shortcuts: ["S"],
-    icon: "i-luonto-mdi-angle-sync",
+    icon: "i-luonto:mdi-angle-sync",
   },
   {
     value: "1",
     label: "1（上端）",
     shortcuts: ["1"],
-    icon: "i-luonto-mdi-angle-1",
+    icon: "i-luonto:mdi-angle-1",
   },
   {
     value: "2",
     label: "2",
     shortcuts: ["2"],
-    icon: "i-luonto-mdi-angle-2",
+    icon: "i-luonto:mdi-angle-2",
   },
   {
     value: "3",
     label: "3",
     shortcuts: ["3"],
-    icon: "i-luonto-mdi-angle-3",
+    icon: "i-luonto:mdi-angle-3",
   },
   {
     value: "4",
     label: "4",
     shortcuts: ["4"],
-    icon: "i-luonto-mdi-angle-4",
+    icon: "i-luonto:mdi-angle-4",
   },
   {
     value: "5",
     label: "5（下端）",
     shortcuts: ["5"],
-    icon: "i-luonto-mdi-angle-5",
+    icon: "i-luonto:mdi-angle-5",
   },
 ];
 
@@ -142,43 +142,43 @@ export const AC_DIR_H_OPTIONS: readonly ACDirHOption[] = [
     value: "auto",
     label: "自動",
     shortcuts: ["A"],
-    icon: "i-luonto-mdi-angle-a",
+    icon: "i-luonto:mdi-angle-a",
   },
   {
     value: "swing",
     label: "スイング",
     shortcuts: ["S"],
-    icon: "i-luonto-mdi-angle-sync",
+    icon: "i-luonto:mdi-angle-sync",
   },
   {
     value: "1",
     label: "1",
     shortcuts: ["1"],
-    icon: "i-luonto-mdi-angle-1",
+    icon: "i-luonto:mdi-angle-1",
   },
   {
     value: "2",
     label: "2",
     shortcuts: ["2"],
-    icon: "i-luonto-mdi-angle-2",
+    icon: "i-luonto:mdi-angle-2",
   },
   {
     value: "3",
     label: "3",
     shortcuts: ["3"],
-    icon: "i-luonto-mdi-angle-3",
+    icon: "i-luonto:mdi-angle-3",
   },
   {
     value: "4",
     label: "4",
     shortcuts: ["4"],
-    icon: "i-luonto-mdi-angle-4",
+    icon: "i-luonto:mdi-angle-4",
   },
   {
     value: "5",
     label: "5",
     shortcuts: ["5"],
-    icon: "i-luonto-mdi-angle-5",
+    icon: "i-luonto:mdi-angle-5",
   },
 ];
 
@@ -191,37 +191,37 @@ export const AC_VOL_OPTIONS: readonly ACVolOption[] = [
     value: "auto",
     label: "自動",
     shortcuts: ["A"],
-    icon: "i-mdi-fan-auto",
+    icon: "i-mdi:fan-auto",
   },
   {
     value: "1",
     label: "1",
     shortcuts: ["1"],
-    icon: "i-mdi-fan-speed-1",
+    icon: "i-mdi:fan-speed-1",
   },
   {
     value: "2",
     label: "2",
     shortcuts: ["2"],
-    icon: "i-mdi-fan-speed-2",
+    icon: "i-mdi:fan-speed-2",
   },
   {
     value: "3",
     label: "3",
     shortcuts: ["3"],
-    icon: "i-mdi-fan-speed-3",
+    icon: "i-mdi:fan-speed-3",
   },
   {
     value: "4",
     label: "4",
     shortcuts: ["4"],
-    icon: "i-luonto-mdi-fan-4",
+    icon: "i-luonto:mdi-fan-4",
   },
   {
     value: "5",
     label: "5",
     shortcuts: ["5"],
-    icon: "i-luonto-mdi-fan-5",
+    icon: "i-luonto:mdi-fan-5",
   },
 ];
 

diff --git a/app/utils/natureDeviceIcons.ts b/app/utils/natureDeviceIcons.ts
@@ -3,7 +3,7 @@ import type { NatureDevice } from "./natureTypes";
 
 export function getNatureDeviceIcon(device: NatureDevice): string {
   return {
-    remo: "i-solar-notification-unread-outline",
-    "remo-e": "i-solar-graph-new-linear",
+    remo: "i-solar:notification-unread-outline",
+    "remo-e": "i-solar:graph-new-linear",
   }[getNatureDeviceType(device)];
 }