From 9beaeb820fff41678205369ee0435c42a6f7d4da Mon Sep 17 00:00:00 2001
From: SegaraRai <SegaraRai@users.noreply.github.com>
Date: Sun, 18 Aug 2024 21:12:27 +0900
Subject: [PATCH] fix: fix interop issue with @nuxt/icon

---
 app/components/AppHeader.vue                  |   4 +-
 app/components/NatureApplianceCardContent.vue |   8 +-
 app/components/NatureApplianceControlAC.vue   |   8 +-
 app/components/NatureApplianceDeviceInfo.vue  |   5 +-
 app/components/NatureDeviceCard.vue           |   4 +-
 app/components/NatureDeviceSensorList.vue     |   5 +-
 app/components/ThemeSelector.vue              |   6 +-
 app/pages/about.vue                           |   4 +-
 app/pages/index.vue                           |   2 +-
 app/pages/signin.vue                          |   6 +-
 app/utils/natureConstantsAC.ts                |  54 ++--
 app/utils/natureDeviceIcons.ts                |   4 +-
 app/utils/natureIcons.ts                      | 258 +++++++++---------
 app/utils/useNatureDeviceSensors.ts           |   6 +-
 buildLuontoIcons.mts                          |  36 +--
 icons/build/luonto/mdi-11.svg                 |   1 +
 icons/build/luonto/mdi-12.svg                 |   1 +
 icons/build/luonto/mdi-angle-1.svg            |   1 +
 icons/build/luonto/mdi-angle-2.svg            |   1 +
 icons/build/luonto/mdi-angle-3.svg            |   1 +
 icons/build/luonto/mdi-angle-4.svg            |   1 +
 icons/build/luonto/mdi-angle-5.svg            |   1 +
 icons/build/luonto/mdi-angle-a.svg            |   1 +
 icons/build/luonto/mdi-angle-lock.svg         |   1 +
 icons/build/luonto/mdi-angle-sync.svg         |   1 +
 icons/build/luonto/mdi-fan-4.svg              |   1 +
 icons/build/luonto/mdi-fan-5.svg              |   1 +
 icons/build/luonto/mdi-off.svg                |   1 +
 icons/build/luonto/mdi-on.svg                 |   1 +
 icons/{ => src}/luonto-mdi-11.svg             |   0
 icons/{ => src}/luonto-mdi-12.svg             |   0
 icons/{ => src}/luonto-mdi-angle-1.svg        |   0
 icons/{ => src}/luonto-mdi-angle-2.svg        |   0
 icons/{ => src}/luonto-mdi-angle-3.svg        |   0
 icons/{ => src}/luonto-mdi-angle-4.svg        |   0
 icons/{ => src}/luonto-mdi-angle-5.svg        |   0
 icons/{ => src}/luonto-mdi-angle-a.svg        |   0
 icons/{ => src}/luonto-mdi-angle-lock.svg     |   0
 icons/{ => src}/luonto-mdi-angle-sync.svg     |   0
 icons/{ => src}/luonto-mdi-fan-4.svg          |   0
 icons/{ => src}/luonto-mdi-fan-5.svg          |   0
 icons/{ => src}/luonto-mdi-off.svg            |   0
 icons/{ => src}/luonto-mdi-on.svg             |   0
 luontoIcons.json                              |  72 -----
 nuxt.config.ts                                |   8 +
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  61 ++---
 tailwind.config.ts                            |  37 ---
 48 files changed, 247 insertions(+), 357 deletions(-)
 create mode 100644 icons/build/luonto/mdi-11.svg
 create mode 100644 icons/build/luonto/mdi-12.svg
 create mode 100644 icons/build/luonto/mdi-angle-1.svg
 create mode 100644 icons/build/luonto/mdi-angle-2.svg
 create mode 100644 icons/build/luonto/mdi-angle-3.svg
 create mode 100644 icons/build/luonto/mdi-angle-4.svg
 create mode 100644 icons/build/luonto/mdi-angle-5.svg
 create mode 100644 icons/build/luonto/mdi-angle-a.svg
 create mode 100644 icons/build/luonto/mdi-angle-lock.svg
 create mode 100644 icons/build/luonto/mdi-angle-sync.svg
 create mode 100644 icons/build/luonto/mdi-fan-4.svg
 create mode 100644 icons/build/luonto/mdi-fan-5.svg
 create mode 100644 icons/build/luonto/mdi-off.svg
 create mode 100644 icons/build/luonto/mdi-on.svg
 rename icons/{ => src}/luonto-mdi-11.svg (100%)
 rename icons/{ => src}/luonto-mdi-12.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-1.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-2.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-3.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-4.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-5.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-a.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-lock.svg (100%)
 rename icons/{ => src}/luonto-mdi-angle-sync.svg (100%)
 rename icons/{ => src}/luonto-mdi-fan-4.svg (100%)
 rename icons/{ => src}/luonto-mdi-fan-5.svg (100%)
 rename icons/{ => src}/luonto-mdi-off.svg (100%)
 rename icons/{ => src}/luonto-mdi-on.svg (100%)
 delete mode 100644 luontoIcons.json

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 45563ca..9816e01 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -95,7 +95,7 @@ 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",
     },
@@ -103,7 +103,7 @@ const items = computed((): DropdownItem[][] => [
   [
     {
       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
index ec8d4fb..6366aa0 100644
--- 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
index d3e2bd8..d435179 100644
--- 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
index 1cc536e..2be9acb 100644
--- 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
index 8764e28..40d64c8 100644
--- 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
index fc00c72..b9afb7e 100644
--- 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
index c4d630e..c84e404 100644
--- 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
index 2c775bc..05670c9 100644
--- 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
index 7407c90..90c2a3e 100644
--- 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
index 08c7a41..afc6e96 100644
--- 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
index 0dd9fc7..d58b384 100644
--- 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
index bddafd9..21465a4 100644
--- 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)];
 }
diff --git a/app/utils/natureIcons.ts b/app/utils/natureIcons.ts
index 1832a98..eb46d2d 100644
--- a/app/utils/natureIcons.ts
+++ b/app/utils/natureIcons.ts
@@ -2,137 +2,137 @@ import type { NatureIcon } from "./natureTypes";
 
 const MAP: ReadonlyMap<NatureIcon, string> = new Map([
   // appliances
-  ["ico_ac_0", "i-ph-hard-drive-light"],
-  ["ico_ac_1", "i-ph-hard-drive-light"],
-  ["ico_air_purifier", "i-ph-wind-light"],
-  ["ico_audio", "i-ph-speaker-hifi-light"],
-  ["ico_av", "i-ph-speaker-hifi-light"],
-  ["ico_battery", "i-ph-battery-charging-light"],
-  ["ico_curtain", "i-ph-app-window-light"],
-  ["ico_electric_water_heater", "i-ph-app-window-light"],
-  ["ico_ene_farm", "i-ph-app-window-light"],
-  ["ico_evcd", "i-ph-app-window-light"],
-  ["ico_fan", "i-ph-pinwheel-light"],
-  ["ico_light", "i-ph-lamp-light"],
-  ["ico_light_projector", "i-ph-lamp-light"],
-  ["ico_lock", "i-ph-app-window-light"],
-  ["ico_power_dist_board", "i-ph-app-window-light"],
-  ["ico_projector", "i-ph-projector-screen-chart-light"],
-  ["ico_robot", "i-ph-app-window-light"],
-  ["ico_smartmeter", "i-ph-wave-sine-light"],
-  ["ico_solarpower", "i-ph-app-window-light"],
-  ["ico_tv", "i-ph-television-simple-light"],
-  ["ico_other", "i-ph-app-window-light"],
+  ["ico_ac_0", "i-ph:hard-drive-light"],
+  ["ico_ac_1", "i-ph:hard-drive-light"],
+  ["ico_air_purifier", "i-ph:wind-light"],
+  ["ico_audio", "i-ph:speaker-hifi-light"],
+  ["ico_av", "i-ph:speaker-hifi-light"],
+  ["ico_battery", "i-ph:battery-charging-light"],
+  ["ico_curtain", "i-ph:app-window-light"],
+  ["ico_electric_water_heater", "i-ph:app-window-light"],
+  ["ico_ene_farm", "i-ph:app-window-light"],
+  ["ico_evcd", "i-ph:app-window-light"],
+  ["ico_fan", "i-ph:pinwheel-light"],
+  ["ico_light", "i-ph:lamp-light"],
+  ["ico_light_projector", "i-ph:lamp-light"],
+  ["ico_lock", "i-ph:app-window-light"],
+  ["ico_power_dist_board", "i-ph:app-window-light"],
+  ["ico_projector", "i-ph:projector-screen-chart-light"],
+  ["ico_robot", "i-ph:app-window-light"],
+  ["ico_smartmeter", "i-ph:wave-sine-light"],
+  ["ico_solarpower", "i-ph:app-window-light"],
+  ["ico_tv", "i-ph:television-simple-light"],
+  ["ico_other", "i-ph:app-window-light"],
 
   // buttons
-  ["ico_number_0", "i-mdi-numeric-0"],
-  ["ico_number_1", "i-mdi-numeric-1"],
-  ["ico_number_2", "i-mdi-numeric-2"],
-  ["ico_number_3", "i-mdi-numeric-3"],
-  ["ico_number_4", "i-mdi-numeric-4"],
-  ["ico_number_5", "i-mdi-numeric-5"],
-  ["ico_number_6", "i-mdi-numeric-6"],
-  ["ico_number_7", "i-mdi-numeric-7"],
-  ["ico_number_8", "i-mdi-numeric-8"],
-  ["ico_number_9", "i-mdi-numeric-9"],
-  ["ico_number_10", "i-mdi-numeric-10"],
-  ["ico_number_11", "i-luonto-mdi-11"],
-  ["ico_number_12", "i-luonto-mdi-12"],
-  ["ico_a", "i-tdesign-letters-a"],
-  ["ico_b", "i-tdesign-letters-b"],
-  ["ico_c", "i-tdesign-letters-c"],
-  ["ico_d", "i-tdesign-letters-d"],
-  ["ico_e", "i-tdesign-letters-e"],
-  ["ico_f", "i-tdesign-letters-f"],
-  ["ico_g", "i-tdesign-letters-g"],
-  ["ico_h", "i-tdesign-letters-h"],
-  ["ico_i", "i-tdesign-letters-i"],
-  ["ico_j", "i-tdesign-letters-j"],
-  ["ico_k", "i-tdesign-letters-k"],
-  ["ico_l", "i-tdesign-letters-l"],
-  ["ico_m", "i-tdesign-letters-m"],
-  ["ico_n", "i-tdesign-letters-n"],
-  ["ico_o", "i-tdesign-letters-o"],
-  ["ico_p", "i-tdesign-letters-p"],
-  ["ico_q", "i-tdesign-letters-q"],
-  ["ico_r", "i-tdesign-letters-r"],
-  ["ico_s", "i-tdesign-letters-s"],
-  ["ico_t", "i-tdesign-letters-t"],
-  ["ico_u", "i-tdesign-letters-u"],
-  ["ico_v", "i-tdesign-letters-v"],
-  ["ico_w", "i-tdesign-letters-w"],
-  ["ico_x", "i-tdesign-letters-x"],
-  ["ico_y", "i-tdesign-letters-y"],
-  ["ico_z", "i-tdesign-letters-z"],
-  ["ico_arrow_bottom", "i-mdi-arrow-down"],
-  ["ico_arrow_left", "i-mdi-arrow-left"],
-  ["ico_arrow_right", "i-mdi-arrow-right"],
-  ["ico_arrow_top", "i-mdi-arrow-up"],
-  ["ico_ac_cool", "i-mdi-fan"],
-  ["ico_ac_dry", "i-mdi-fan"],
-  ["ico_ac_eco", "i-mdi-fan"],
-  ["ico_ac_fan", "i-mdi-fan"],
-  ["ico_ac_warm", "i-mdi-fan"],
-  ["ico_ac0", "i-tdesign-help"],
-  ["ico_ac1", "i-tdesign-help"],
-  ["ico_am", "i-mdi-radio-am"],
-  ["ico_backward", "i-tdesign-help"],
-  ["ico_blast", "i-tdesign-help"],
-  ["ico_bright", "i-tdesign-help"],
-  ["ico_broadcast", "i-tdesign-help"],
-  ["ico_bs", "i-tdesign-help"],
-  ["ico_check", "i-tdesign-help"],
-  ["ico_color_blue", "i-tdesign-help"],
-  ["ico_color_green", "i-tdesign-help"],
-  ["ico_color_red", "i-tdesign-help"],
-  ["ico_color_yellow", "i-tdesign-help"],
-  ["ico_colortemp_down", "i-mdi-lightbulb-on-outline"],
-  ["ico_colortemp_up", "i-mdi-lightbulb-on-outline"],
-  ["ico_cross", "i-mdi-close"],
-  ["ico_cs", "i-tdesign-help"],
-  ["ico_dark", "i-tdesign-help"],
-  ["ico_dash", "i-tdesign-help"],
-  ["ico_display", "i-tdesign-help"],
-  ["ico_fm", "i-mdi-radio-fm"],
-  ["ico_focus", "i-tdesign-help"],
-  ["ico_forward", "i-mdi-skip-forward"],
-  ["ico_home", "i-mdi-home"],
-  ["ico_input", "i-tdesign-help"],
-  ["ico_io_without_tv", "i-tdesign-help"],
-  ["ico_io", "i-tdesign-help"],
-  ["ico_light_all", "i-mdi-lightbulb-on"],
-  ["ico_light_favorite", "i-mdi-star"],
-  ["ico_light_night", "i-material-symbols-dark-mode"],
-  ["ico_light_off", "i-mdi-lightbulb-outline"],
-  ["ico_lightdown", "i-mdi-minus"],
-  ["ico_lightup", "i-mdi-plus"],
-  ["ico_menu", "i-mdi-menu"],
-  ["ico_minus", "i-mdi-minus"],
-  ["ico_mode_auto", "i-tdesign-help"],
-  ["ico_mute", "i-mdi-volume-off"],
-  ["ico_next", "i-mdi-skip-next"],
-  ["ico_night_light", "i-material-symbols-dark-mode"],
-  ["ico_off", "i-luonto-mdi-off"],
-  ["ico_on", "i-luonto-mdi-on"],
-  ["ico_option", "i-tdesign-help"],
-  ["ico_pause", "i-mdi-pause"],
-  ["ico_play_pause", "i-mdi-play-pause"],
-  ["ico_play", "i-mdi-play"],
-  ["ico_plus", "i-mdi-plus"],
-  ["ico_previous", "i-mdi-skip-previous"],
-  ["ico_record", "i-mdi-record"],
-  ["ico_return", "i-mdi-arrow-u-left-top"],
-  ["ico_select_audio", "i-tdesign-help"],
-  ["ico_setting", "i-mdi-cog"],
-  ["ico_stop", "i-mdi-stop"],
-  ["ico_subtitle", "i-mdi-closed-caption"],
-  ["ico_text_close", "i-tdesign-help"],
-  ["ico_text_open", "i-tdesign-help"],
-  ["ico_text_stop", "i-tdesign-help"],
-  ["ico_timer", "i-mdi-timer"],
-  ["ico_tool", "i-tdesign-help"],
-  ["ico_tv_guide", "i-tdesign-help"],
-  ["ico_tv", "i-tdesign-help"],
+  ["ico_number_0", "i-mdi:numeric-0"],
+  ["ico_number_1", "i-mdi:numeric-1"],
+  ["ico_number_2", "i-mdi:numeric-2"],
+  ["ico_number_3", "i-mdi:numeric-3"],
+  ["ico_number_4", "i-mdi:numeric-4"],
+  ["ico_number_5", "i-mdi:numeric-5"],
+  ["ico_number_6", "i-mdi:numeric-6"],
+  ["ico_number_7", "i-mdi:numeric-7"],
+  ["ico_number_8", "i-mdi:numeric-8"],
+  ["ico_number_9", "i-mdi:numeric-9"],
+  ["ico_number_10", "i-mdi:numeric-10"],
+  ["ico_number_11", "i-luonto:mdi-11"],
+  ["ico_number_12", "i-luonto:mdi-12"],
+  ["ico_a", "i-tdesign:letters-a"],
+  ["ico_b", "i-tdesign:letters-b"],
+  ["ico_c", "i-tdesign:letters-c"],
+  ["ico_d", "i-tdesign:letters-d"],
+  ["ico_e", "i-tdesign:letters-e"],
+  ["ico_f", "i-tdesign:letters-f"],
+  ["ico_g", "i-tdesign:letters-g"],
+  ["ico_h", "i-tdesign:letters-h"],
+  ["ico_i", "i-tdesign:letters-i"],
+  ["ico_j", "i-tdesign:letters-j"],
+  ["ico_k", "i-tdesign:letters-k"],
+  ["ico_l", "i-tdesign:letters-l"],
+  ["ico_m", "i-tdesign:letters-m"],
+  ["ico_n", "i-tdesign:letters-n"],
+  ["ico_o", "i-tdesign:letters-o"],
+  ["ico_p", "i-tdesign:letters-p"],
+  ["ico_q", "i-tdesign:letters-q"],
+  ["ico_r", "i-tdesign:letters-r"],
+  ["ico_s", "i-tdesign:letters-s"],
+  ["ico_t", "i-tdesign:letters-t"],
+  ["ico_u", "i-tdesign:letters-u"],
+  ["ico_v", "i-tdesign:letters-v"],
+  ["ico_w", "i-tdesign:letters-w"],
+  ["ico_x", "i-tdesign:letters-x"],
+  ["ico_y", "i-tdesign:letters-y"],
+  ["ico_z", "i-tdesign:letters-z"],
+  ["ico_arrow_bottom", "i-mdi:arrow-down"],
+  ["ico_arrow_left", "i-mdi:arrow-left"],
+  ["ico_arrow_right", "i-mdi:arrow-right"],
+  ["ico_arrow_top", "i-mdi:arrow-up"],
+  ["ico_ac_cool", "i-mdi:fan"],
+  ["ico_ac_dry", "i-mdi:fan"],
+  ["ico_ac_eco", "i-mdi:fan"],
+  ["ico_ac_fan", "i-mdi:fan"],
+  ["ico_ac_warm", "i-mdi:fan"],
+  ["ico_ac0", "i-tdesign:help"],
+  ["ico_ac1", "i-tdesign:help"],
+  ["ico_am", "i-mdi:radio-am"],
+  ["ico_backward", "i-tdesign:help"],
+  ["ico_blast", "i-tdesign:help"],
+  ["ico_bright", "i-tdesign:help"],
+  ["ico_broadcast", "i-tdesign:help"],
+  ["ico_bs", "i-tdesign:help"],
+  ["ico_check", "i-tdesign:help"],
+  ["ico_color_blue", "i-tdesign:help"],
+  ["ico_color_green", "i-tdesign:help"],
+  ["ico_color_red", "i-tdesign:help"],
+  ["ico_color_yellow", "i-tdesign:help"],
+  ["ico_colortemp_down", "i-mdi:lightbulb-on-outline"],
+  ["ico_colortemp_up", "i-mdi:lightbulb-on-outline"],
+  ["ico_cross", "i-mdi:close"],
+  ["ico_cs", "i-tdesign:help"],
+  ["ico_dark", "i-tdesign:help"],
+  ["ico_dash", "i-tdesign:help"],
+  ["ico_display", "i-tdesign:help"],
+  ["ico_fm", "i-mdi:radio-fm"],
+  ["ico_focus", "i-tdesign:help"],
+  ["ico_forward", "i-mdi:skip-forward"],
+  ["ico_home", "i-mdi:home"],
+  ["ico_input", "i-tdesign:help"],
+  ["ico_io_without_tv", "i-tdesign:help"],
+  ["ico_io", "i-tdesign:help"],
+  ["ico_light_all", "i-mdi:lightbulb-on"],
+  ["ico_light_favorite", "i-mdi:star"],
+  ["ico_light_night", "i-material-symbols:dark-mode"],
+  ["ico_light_off", "i-mdi:lightbulb-outline"],
+  ["ico_lightdown", "i-mdi:minus"],
+  ["ico_lightup", "i-mdi:plus"],
+  ["ico_menu", "i-mdi:menu"],
+  ["ico_minus", "i-mdi:minus"],
+  ["ico_mode_auto", "i-tdesign:help"],
+  ["ico_mute", "i-mdi:volume-off"],
+  ["ico_next", "i-mdi:skip-next"],
+  ["ico_night_light", "i-material-symbols:dark-mode"],
+  ["ico_off", "i-luonto:mdi-off"],
+  ["ico_on", "i-luonto:mdi-on"],
+  ["ico_option", "i-tdesign:help"],
+  ["ico_pause", "i-mdi:pause"],
+  ["ico_play_pause", "i-mdi:play-pause"],
+  ["ico_play", "i-mdi:play"],
+  ["ico_plus", "i-mdi:plus"],
+  ["ico_previous", "i-mdi:skip-previous"],
+  ["ico_record", "i-mdi:record"],
+  ["ico_return", "i-mdi:arrow-u-left-top"],
+  ["ico_select_audio", "i-tdesign:help"],
+  ["ico_setting", "i-mdi:cog"],
+  ["ico_stop", "i-mdi:stop"],
+  ["ico_subtitle", "i-mdi:closed-caption"],
+  ["ico_text_close", "i-tdesign:help"],
+  ["ico_text_open", "i-tdesign:help"],
+  ["ico_text_stop", "i-tdesign:help"],
+  ["ico_timer", "i-mdi:timer"],
+  ["ico_tool", "i-tdesign:help"],
+  ["ico_tv_guide", "i-tdesign:help"],
+  ["ico_tv", "i-tdesign:help"],
 ]);
 
 export function natureIconToClass(image: NatureIcon): string {
diff --git a/app/utils/useNatureDeviceSensors.ts b/app/utils/useNatureDeviceSensors.ts
index 6411d1c..e445a73 100644
--- a/app/utils/useNatureDeviceSensors.ts
+++ b/app/utils/useNatureDeviceSensors.ts
@@ -55,7 +55,7 @@ export function getNatureDeviceSensors(
   return [
     {
       color: "text-orange-400",
-      icon: "i-mingcute-high-temperature-line",
+      icon: "i-mingcute:high-temperature-line",
       label: "室温",
       // I think device's unit is always Celsius
       unit: "\u00BAC",
@@ -67,7 +67,7 @@ export function getNatureDeviceSensors(
     },
     {
       color: "text-blue-400",
-      icon: "i-mingcute-drop-line",
+      icon: "i-mingcute:drop-line",
       label: "湿度",
       unit: "%",
       data: events.hu && {
@@ -78,7 +78,7 @@ export function getNatureDeviceSensors(
     },
     {
       color: "text-yellow-400",
-      icon: "i-mingcute-light-line",
+      icon: "i-mingcute:light-line",
       label: "明るさ",
       unit: "lx",
       data: events.il && {
diff --git a/buildLuontoIcons.mts b/buildLuontoIcons.mts
index 56502be..96a9f45 100644
--- a/buildLuontoIcons.mts
+++ b/buildLuontoIcons.mts
@@ -1,13 +1,6 @@
-import { readdir, readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { type Config, optimize } from "svgo";
 
-interface Icon {
-  name: string;
-  body: string;
-  width: number;
-  height: number;
-}
-
 const config: Config = {
   multipass: true,
   floatPrecision: 2,
@@ -37,15 +30,15 @@ const config: Config = {
   ],
 };
 
-const icons: Icon[] = [];
+await mkdir("icons/build/luonto", { recursive: true });
 
-for (const file of await readdir("icons")) {
+for (const file of await readdir("icons/src")) {
   const name = file.match(/^luonto-([^.]+)\.svg$/)?.[1];
   if (!name) {
     continue;
   }
 
-  const content = await readFile(`icons/${file}`, "utf-8");
+  const content = await readFile(`icons/src/${file}`, "utf-8");
   const { data } = optimize(content, config);
 
   const [, width, height] = data.match(/viewBox="0 0 (\d+) (\d+)"/) ?? [];
@@ -59,21 +52,8 @@ for (const file of await readdir("icons")) {
     .replace(/<path /, '$&fill="currentColor" ')
     .trim();
 
-  icons.push({
-    name,
-    body,
-    width: Number(width),
-    height: Number(height),
-  });
+  await writeFile(
+    `icons/build/luonto/${name}.svg`,
+    `<svg viewBox="0 0 ${width} ${height}">${body}</svg>`
+  );
 }
-
-icons.sort((a, b) => a.name.localeCompare(b.name));
-
-await writeFile(
-  "luontoIcons.json",
-  JSON.stringify(
-    Object.fromEntries(icons.map(({ name, ...rest }) => [name, rest])),
-    null,
-    2
-  ) + "\n"
-);
diff --git a/icons/build/luonto/mdi-11.svg b/icons/build/luonto/mdi-11.svg
new file mode 100644
index 0000000..01cda49
--- /dev/null
+++ b/icons/build/luonto/mdi-11.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M13.33 9.33H8V12h2.67v10.67h2.66zm8 0v13.34h-2.66V12H16V9.33z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-12.svg b/icons/build/luonto/mdi-12.svg
new file mode 100644
index 0000000..58d2425
--- /dev/null
+++ b/icons/build/luonto/mdi-12.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M13.33 9.33H8V12h2.67v10.67h2.66zm2.67 0V12h5.33v2.67h-2.66A2.7 2.7 0 0 0 16 17.33v5.34h8V20h-5.33v-2.67h2.66c1.47 0 2.67-1.2 2.67-2.66V12c0-1.46-1.2-2.67-2.67-2.67z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-1.svg b/icons/build/luonto/mdi-angle-1.svg
new file mode 100644
index 0000000..1b7418a
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-1.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M22.67 20h4v10.67H24v-8h-1.33zM28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-2.svg b/icons/build/luonto/mdi-angle-2.svg
new file mode 100644
index 0000000..c57ae24
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-2.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zM21.33 20h4C26.8 20 28 21.2 28 22.67V24a2.66 2.66 0 0 1-2.67 2.67H24V28h4v2.67h-6.67v-4c0-1.47 1.2-2.67 2.67-2.67h1.33v-1.33h-4z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-3.svg b/icons/build/luonto/mdi-angle-3.svg
new file mode 100644
index 0000000..578c834
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-3.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zM28 28a2.66 2.66 0 0 1-2.67 2.67h-4V28h4v-1.33h-2.66V24h2.66v-1.33h-4V20h4C26.8 20 28 21.2 28 22.67v.66a2 2 0 0 1-2 2 2 2 0 0 1 2 2z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-4.svg b/icons/build/luonto/mdi-angle-4.svg
new file mode 100644
index 0000000..78af324
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-4.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zM21.33 20v6.67h4v4H28V19.99h-2.67v4H24v-4z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-5.svg b/icons/build/luonto/mdi-angle-5.svg
new file mode 100644
index 0000000..f9bdcac
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-5.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zM25.33 24H24v-1.33h4V20h-6.67v6.67h4V28h-4v2.67h4c1.47 0 2.67-1.2 2.67-2.67v-1.33A2.66 2.66 0 0 0 25.33 24"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-a.svg b/icons/build/luonto/mdi-angle-a.svg
new file mode 100644
index 0000000..3a9ce3e
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-a.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M24 20h2.67c1.46 0 2.66 1.2 2.66 2.67v8h-2.66V28H24v2.67h-2.67v-8c0-1.47 1.2-2.67 2.67-2.67m0 2.67v2.66h2.67v-2.66zm4-16H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-lock.svg b/icons/build/luonto/mdi-angle-lock.svg
new file mode 100644
index 0000000..066937c
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-lock.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zm16.42 13.74v4.66c0 .8-.8 1.6-1.74 1.6H21.6c-.8 0-1.6-.8-1.6-1.73v-4.67c0-.8.8-1.6 1.6-1.6v-2c0-1.86 1.87-3.33 3.73-3.33 1.87 0 3.74 1.47 3.74 3.33v2c.8 0 1.6.8 1.6 1.74m-3.34-3.74c0-1.06-.93-1.73-2-1.73s-2 .67-2 1.73v2h4z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-angle-sync.svg b/icons/build/luonto/mdi-angle-sync.svg
new file mode 100644
index 0000000..5bcbbd3
--- /dev/null
+++ b/icons/build/luonto/mdi-angle-sync.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28zM14.25 9.33h3.86a3.8 3.8 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26zM25.33 18v-2l-3 3 3 3v-2a3.35 3.35 0 0 1 2.99 4.83l1.45 1.45A5.33 5.33 0 0 0 25.33 18m0 8.67a3.35 3.35 0 0 1-2.98-4.83l-1.46-1.45a5.33 5.33 0 0 0 4.44 8.28v2l3-3-3-3z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-fan-4.svg b/icons/build/luonto/mdi-fan-4.svg
new file mode 100644
index 0000000..3a5236b
--- /dev/null
+++ b/icons/build/luonto/mdi-fan-4.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M21.33 20v6.67h4v4H28V19.99h-2.67v4H24v-4zm-4 5.33c0 1.15.26 2.23.67 3.22a4.5 4.5 0 0 1-2.67.78c-6 0-6.13-4.77-2.98-6.34 1.3-.66 1.89-2.04 2.16-3.27a4 4 0 0 1-1.66-1.23c-4.92 2.64-10.18 1.6-10.18-3.16 0-6 4.74-6.14 6.3-2.98.67 1.32 2.07 1.89 3.31 2.14q.39-.97 1.23-1.62c-2.66-4.92-1.6-10.2 3.16-10.2 6 0 6.12 4.76 2.97 6.33-1.32.65-1.9 2.05-2.16 3.3q.96.4 1.63 1.2c4.93-2.66 10.22-1.6 10.22 3.17q-.01.91-.14 1.65a8 8 0 0 0-7.52-.1 6 6 0 0 0-1.98-.74 4 4 0 0 1-1.21 1.64q.33.63.59 1.25a8 8 0 0 0-1.74 4.96m-1.33-8c.72 0 1.33-.6 1.33-1.33s-.61-1.33-1.33-1.33c-.76 0-1.33.6-1.33 1.33s.57 1.33 1.33 1.33"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-fan-5.svg b/icons/build/luonto/mdi-fan-5.svg
new file mode 100644
index 0000000..656c29e
--- /dev/null
+++ b/icons/build/luonto/mdi-fan-5.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M17.33 25.33c0 1.15.26 2.23.67 3.22a4.5 4.5 0 0 1-2.67.78c-6 0-6.13-4.77-2.98-6.34 1.3-.66 1.89-2.04 2.16-3.27a4 4 0 0 1-1.66-1.23c-4.92 2.64-10.18 1.6-10.18-3.16 0-6 4.74-6.14 6.3-2.98.67 1.32 2.07 1.89 3.31 2.14q.39-.97 1.23-1.62c-2.66-4.92-1.6-10.2 3.16-10.2 6 0 6.12 4.76 2.97 6.33-1.32.65-1.9 2.05-2.16 3.3q.96.4 1.63 1.2c4.93-2.66 10.22-1.6 10.22 3.17q-.01.91-.14 1.65a8 8 0 0 0-7.52-.1 6 6 0 0 0-1.98-.74 4 4 0 0 1-1.21 1.64q.33.63.59 1.25a8 8 0 0 0-1.74 4.96m-1.33-8c.72 0 1.33-.6 1.33-1.33s-.61-1.33-1.33-1.33c-.76 0-1.33.6-1.33 1.33s.57 1.33 1.33 1.33M25.33 24H24v-1.33h4V20h-6.67v6.67h4V28h-4v2.67h4c1.47 0 2.67-1.2 2.67-2.67v-1.33A2.66 2.66 0 0 0 25.33 24"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-off.svg b/icons/build/luonto/mdi-off.svg
new file mode 100644
index 0000000..09f01ea
--- /dev/null
+++ b/icons/build/luonto/mdi-off.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M11.79 16.16q0 2.78-1.48 4.38a5 5 0 0 1-3.8 1.6q-2.33 0-3.81-1.6-1.49-1.6-1.49-4.38v-.49q0-2.77 1.48-4.37 1.47-1.6 3.8-1.6t3.81 1.6 1.49 4.37zm-2.96-.5q0-1.83-.58-2.75a1.9 1.9 0 0 0-1.76-.92q-2.17 0-2.3 3.23l-.01.94q0 1.78.58 2.74a1.9 1.9 0 0 0 1.75.96q1.1 0 1.71-.95t.61-2.7zm4.47 6.3V9.86h8.1v2.26h-5.18v2.78h4.7v2.24h-4.7v4.82zm9.31 0V9.86h8.09v2.26h-5.18v2.78h4.7v2.24h-4.7v4.82z"/></svg>
\ No newline at end of file
diff --git a/icons/build/luonto/mdi-on.svg b/icons/build/luonto/mdi-on.svg
new file mode 100644
index 0000000..094d4bf
--- /dev/null
+++ b/icons/build/luonto/mdi-on.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32"><path fill="currentColor" d="M15.12 16.16q0 2.78-1.48 4.38a5 5 0 0 1-3.8 1.6q-2.33 0-3.81-1.6t-1.49-4.38v-.49q0-2.77 1.48-4.37t3.81-1.6 3.8 1.6 1.5 4.37zm-2.96-.5q0-1.83-.58-2.75a1.9 1.9 0 0 0-1.75-.92q-2.18 0-2.3 3.23l-.02.94q0 1.78.59 2.74a1.9 1.9 0 0 0 1.75.96q1.1 0 1.7-.95t.61-2.7zm14.58-5.8v12.1h-2.91l-4.28-7.53v7.53h-2.92V9.86h2.92l4.28 7.54V9.87z"/></svg>
\ No newline at end of file
diff --git a/icons/luonto-mdi-11.svg b/icons/src/luonto-mdi-11.svg
similarity index 100%
rename from icons/luonto-mdi-11.svg
rename to icons/src/luonto-mdi-11.svg
diff --git a/icons/luonto-mdi-12.svg b/icons/src/luonto-mdi-12.svg
similarity index 100%
rename from icons/luonto-mdi-12.svg
rename to icons/src/luonto-mdi-12.svg
diff --git a/icons/luonto-mdi-angle-1.svg b/icons/src/luonto-mdi-angle-1.svg
similarity index 100%
rename from icons/luonto-mdi-angle-1.svg
rename to icons/src/luonto-mdi-angle-1.svg
diff --git a/icons/luonto-mdi-angle-2.svg b/icons/src/luonto-mdi-angle-2.svg
similarity index 100%
rename from icons/luonto-mdi-angle-2.svg
rename to icons/src/luonto-mdi-angle-2.svg
diff --git a/icons/luonto-mdi-angle-3.svg b/icons/src/luonto-mdi-angle-3.svg
similarity index 100%
rename from icons/luonto-mdi-angle-3.svg
rename to icons/src/luonto-mdi-angle-3.svg
diff --git a/icons/luonto-mdi-angle-4.svg b/icons/src/luonto-mdi-angle-4.svg
similarity index 100%
rename from icons/luonto-mdi-angle-4.svg
rename to icons/src/luonto-mdi-angle-4.svg
diff --git a/icons/luonto-mdi-angle-5.svg b/icons/src/luonto-mdi-angle-5.svg
similarity index 100%
rename from icons/luonto-mdi-angle-5.svg
rename to icons/src/luonto-mdi-angle-5.svg
diff --git a/icons/luonto-mdi-angle-a.svg b/icons/src/luonto-mdi-angle-a.svg
similarity index 100%
rename from icons/luonto-mdi-angle-a.svg
rename to icons/src/luonto-mdi-angle-a.svg
diff --git a/icons/luonto-mdi-angle-lock.svg b/icons/src/luonto-mdi-angle-lock.svg
similarity index 100%
rename from icons/luonto-mdi-angle-lock.svg
rename to icons/src/luonto-mdi-angle-lock.svg
diff --git a/icons/luonto-mdi-angle-sync.svg b/icons/src/luonto-mdi-angle-sync.svg
similarity index 100%
rename from icons/luonto-mdi-angle-sync.svg
rename to icons/src/luonto-mdi-angle-sync.svg
diff --git a/icons/luonto-mdi-fan-4.svg b/icons/src/luonto-mdi-fan-4.svg
similarity index 100%
rename from icons/luonto-mdi-fan-4.svg
rename to icons/src/luonto-mdi-fan-4.svg
diff --git a/icons/luonto-mdi-fan-5.svg b/icons/src/luonto-mdi-fan-5.svg
similarity index 100%
rename from icons/luonto-mdi-fan-5.svg
rename to icons/src/luonto-mdi-fan-5.svg
diff --git a/icons/luonto-mdi-off.svg b/icons/src/luonto-mdi-off.svg
similarity index 100%
rename from icons/luonto-mdi-off.svg
rename to icons/src/luonto-mdi-off.svg
diff --git a/icons/luonto-mdi-on.svg b/icons/src/luonto-mdi-on.svg
similarity index 100%
rename from icons/luonto-mdi-on.svg
rename to icons/src/luonto-mdi-on.svg
diff --git a/luontoIcons.json b/luontoIcons.json
deleted file mode 100644
index f45b17c..0000000
--- a/luontoIcons.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
-  "mdi-11": {
-    "body": "<path fill=\"currentColor\" d=\"M13.33 9.33H8V12h2.67v10.67h2.66V9.33m8 0v13.34h-2.66V12H16V9.33h5.33Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-12": {
-    "body": "<path fill=\"currentColor\" d=\"M13.33 9.33H8V12h2.67v10.67h2.66V9.33m2.67 0V12h5.33v2.67h-2.66A2.68 2.68 0 0 0 16 17.33v5.34h8V20h-5.33v-2.67h2.66c1.47 0 2.67-1.2 2.67-2.66V12c0-1.46-1.2-2.67-2.67-2.67H16Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-1": {
-    "body": "<path fill=\"currentColor\" d=\"M22.67 20h4v10.67H24v-8h-1.33V20ZM28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-2": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52ZM21.33 20h4C26.8 20 28 21.2 28 22.67V24a2.66 2.66 0 0 1-2.67 2.67H24V28h4v2.67h-6.67v-4c0-1.47 1.2-2.67 2.67-2.67h1.33v-1.33h-4V20Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-3": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52ZM28 28a2.66 2.66 0 0 1-2.67 2.67h-4V28h4v-1.33h-2.66V24h2.66v-1.33h-4V20h4C26.8 20 28 21.2 28 22.67v.66a2 2 0 0 1-2 2 2 2 0 0 1 2 2V28Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-4": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52ZM21.33 20v6.67h4v4H28V19.99h-2.67v4H24v-4h-2.67Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-5": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52ZM25.33 24H24v-1.33h4V20h-6.67v6.67h4V28h-4v2.67h4c1.47 0 2.67-1.2 2.67-2.67v-1.33A2.66 2.66 0 0 0 25.33 24Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-a": {
-    "body": "<path fill=\"currentColor\" d=\"M24 20h2.67c1.46 0 2.66 1.2 2.66 2.67v8h-2.66V28H24v2.67h-2.67v-8c0-1.47 1.2-2.67 2.67-2.67Zm0 2.67v2.66h2.67v-2.66H24Zm4-16H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-lock": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52Zm16.42 13.74v4.66c0 .8-.8 1.6-1.74 1.6H21.6c-.8 0-1.6-.8-1.6-1.73v-4.67c0-.8.8-1.6 1.6-1.6v-2c0-1.86 1.87-3.33 3.73-3.33 1.87 0 3.74 1.47 3.74 3.33v2c.8 0 1.6.8 1.6 1.74m-3.34-3.74c0-1.06-.93-1.73-2-1.73-1.06 0-2 .67-2 1.73v2h4v-2Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-angle-sync": {
-    "body": "<path fill=\"currentColor\" d=\"M28 6.67H12.41L5.43 24.85l2.48.96 4.04-10.48a6.54 6.54 0 0 0 8.83-6H28V6.67M14.25 9.33h3.86a3.82 3.82 0 0 1-3.8 3.78h-.03a4 4 0 0 1-1.39-.26l1.36-3.52ZM25.33 18v-2l-3 3 3 3v-2a3.35 3.35 0 0 1 2.99 4.83l1.45 1.45A5.33 5.33 0 0 0 25.33 18m0 8.67a3.35 3.35 0 0 1-2.98-4.83l-1.46-1.45a5.33 5.33 0 0 0 4.44 8.28v2l3-3-3-3v2Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-fan-4": {
-    "body": "<path fill=\"currentColor\" d=\"M21.33 20v6.67h4v4H28V19.99h-2.67v4H24v-4h-2.67Zm-4 5.33c0 1.15.26 2.23.67 3.22a4.5 4.5 0 0 1-2.67.78c-6 0-6.13-4.77-2.98-6.34 1.3-.66 1.89-2.04 2.16-3.27a4.1 4.1 0 0 1-1.66-1.23c-4.92 2.64-10.18 1.6-10.18-3.16 0-6 4.74-6.14 6.3-2.98.67 1.32 2.07 1.89 3.31 2.14.25-.64.68-1.2 1.23-1.62-2.66-4.92-1.6-10.2 3.16-10.2 6 0 6.12 4.76 2.97 6.33-1.32.65-1.9 2.05-2.16 3.3.64.26 1.19.67 1.63 1.2 4.93-2.66 10.22-1.6 10.22 3.17 0 .61-.06 1.16-.14 1.65a8 8 0 0 0-7.52-.1 6.36 6.36 0 0 0-1.98-.74 4.32 4.32 0 0 1-1.21 1.64c.23.41.41.84.59 1.25a8.02 8.02 0 0 0-1.74 4.96Zm-1.33-8c.72 0 1.33-.6 1.33-1.33 0-.73-.61-1.33-1.33-1.33-.76 0-1.33.6-1.33 1.33 0 .73.57 1.33 1.33 1.33Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-fan-5": {
-    "body": "<path fill=\"currentColor\" d=\"M17.33 25.33c0 1.15.26 2.23.67 3.22a4.5 4.5 0 0 1-2.67.78c-6 0-6.13-4.77-2.98-6.34 1.3-.66 1.89-2.04 2.16-3.27a4.1 4.1 0 0 1-1.66-1.23c-4.92 2.64-10.18 1.6-10.18-3.16 0-6 4.74-6.14 6.3-2.98.67 1.32 2.07 1.89 3.31 2.14.25-.64.68-1.2 1.23-1.62-2.66-4.92-1.6-10.2 3.16-10.2 6 0 6.12 4.76 2.97 6.33-1.32.65-1.9 2.05-2.16 3.3.64.26 1.19.67 1.63 1.2 4.93-2.66 10.22-1.6 10.22 3.17 0 .61-.06 1.16-.14 1.65a8 8 0 0 0-7.52-.1 6.36 6.36 0 0 0-1.98-.74 4.32 4.32 0 0 1-1.21 1.64c.23.41.41.84.59 1.25a8.02 8.02 0 0 0-1.74 4.96Zm-1.33-8c.72 0 1.33-.6 1.33-1.33 0-.73-.61-1.33-1.33-1.33-.76 0-1.33.6-1.33 1.33 0 .73.57 1.33 1.33 1.33ZM25.33 24H24v-1.33h4V20h-6.67v6.67h4V28h-4v2.67h4c1.47 0 2.67-1.2 2.67-2.67v-1.33A2.66 2.66 0 0 0 25.33 24Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-off": {
-    "body": "<path fill=\"currentColor\" d=\"M11.79 16.16c0 1.85-.5 3.31-1.48 4.38a4.95 4.95 0 0 1-3.8 1.6 4.96 4.96 0 0 1-3.81-1.6 6.18 6.18 0 0 1-1.5-4.38v-.49c0-1.85.5-3.31 1.48-4.37a4.94 4.94 0 0 1 3.8-1.6c1.55 0 2.82.53 3.81 1.6 1 1.07 1.49 2.52 1.49 4.37v.5Zm-2.96-.5c0-1.22-.19-2.14-.58-2.75a1.93 1.93 0 0 0-1.76-.92c-1.45 0-2.21 1.07-2.3 3.23l-.01.94c0 1.19.2 2.1.58 2.74a1.92 1.92 0 0 0 1.75.96c.74 0 1.31-.32 1.71-.95.4-.63.6-1.53.61-2.7v-.55Zm4.47 6.3V9.86h8.1v2.26h-5.18v2.78h4.7v2.24h-4.7v4.82H13.3Zm9.31 0V9.86h8.09v2.26h-5.18v2.78h4.7v2.24h-4.7v4.82h-2.91Z\"/>",
-    "width": 32,
-    "height": 32
-  },
-  "mdi-on": {
-    "body": "<path fill=\"currentColor\" d=\"M15.12 16.16c0 1.85-.5 3.31-1.48 4.38a4.94 4.94 0 0 1-3.8 1.6 4.98 4.98 0 0 1-3.81-1.6 6.2 6.2 0 0 1-1.49-4.38v-.49c0-1.85.5-3.3 1.48-4.37a4.96 4.96 0 0 1 3.81-1.6c1.55 0 2.81.53 3.8 1.6 1 1.07 1.5 2.52 1.5 4.37v.5Zm-2.96-.5c0-1.22-.2-2.14-.58-2.75a1.93 1.93 0 0 0-1.75-.92c-1.45 0-2.22 1.07-2.3 3.23l-.02.94c0 1.19.2 2.1.59 2.74a1.92 1.92 0 0 0 1.75.96c.73 0 1.3-.32 1.7-.95.4-.63.6-1.53.61-2.7v-.55Zm14.58-5.8v12.1h-2.91l-4.28-7.53v7.53h-2.92V9.86h2.92l4.28 7.54V9.87h2.91Z\"/>",
-    "width": 32,
-    "height": 32
-  }
-}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 77cd387..9eb1a2b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -85,4 +85,12 @@ export default defineNuxtConfig({
       "emerald",
     ],
   },
+  icon: {
+    customCollections: [
+      {
+        prefix: "luonto",
+        dir: "icons/build/luonto",
+      },
+    ],
+  },
 });
diff --git a/package.json b/package.json
index af37e4b..49e7b8a 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
   },
   "devDependencies": {
     "@auth/core": "^0.34.2",
-    "@egoist/tailwindcss-icons": "^1.8.1",
     "@hebilicious/authjs-nuxt": "^0.3.5",
     "@iconify-json/material-symbols": "^1.1.88",
     "@iconify-json/mdi": "^1.1.68",
     "@iconify-json/mingcute": "^1.1.19",
     "@iconify-json/ph": "^1.1.14",
     "@iconify-json/solar": "^1.1.10",
+    "@iconify-json/tdesign": "^1.1.8",
     "@minify-html/node": "^0.15.0",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint": "^0.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e9bcd4..a653a61 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
       '@auth/core':
         specifier: ^0.34.2
         version: 0.34.2
-      '@egoist/tailwindcss-icons':
-        specifier: ^1.8.1
-        version: 1.8.1(tailwindcss@3.4.10)
       '@hebilicious/authjs-nuxt':
         specifier: ^0.3.5
         version: 0.3.5(@auth/core@0.34.2)(magicast@0.3.4)(nuxt@3.12.4(@parcel/watcher@2.4.1)(@types/node@22.4.0)(encoding@0.1.13)(eslint@9.9.0(jiti@1.21.6))(idb-keyval@6.2.1)(ioredis@5.4.1)(magicast@0.3.4)(optionator@0.9.4)(rollup@2.79.1)(terser@5.31.6)(typescript@5.5.4)(vite@5.4.1(@types/node@22.4.0)(terser@5.31.6))(vue-tsc@2.0.29(typescript@5.5.4)))(rollup@2.79.1)
@@ -32,6 +29,9 @@ importers:
       '@iconify-json/solar':
         specifier: ^1.1.10
         version: 1.1.10
+      '@iconify-json/tdesign':
+        specifier: ^1.1.8
+        version: 1.1.8
       '@minify-html/node':
         specifier: ^0.15.0
         version: 0.15.0
@@ -849,11 +849,6 @@ packages:
     peerDependencies:
       postcss-selector-parser: ^6.0.13
 
-  '@egoist/tailwindcss-icons@1.8.1':
-    resolution: {integrity: sha512-hqZeASrhT6BOeaBHYDPB0yBH/zgMKqmm7y2Rsq0c4iRnNVv1RWEiXMBMJB38JsDMTHME450FKa/wvdaIhED+Iw==}
-    peerDependencies:
-      tailwindcss: '*'
-
   '@es-joy/jsdoccomment@0.46.0':
     resolution: {integrity: sha512-C3Axuq1xd/9VqFZpW4YAzOx5O9q/LP46uIQy/iNDpHG3fmPa6TBtvfglMCs3RBiBxAIi0Go97r8+jvTt55XMyQ==}
     engines: {node: '>=16'}
@@ -1500,6 +1495,9 @@ packages:
   '@iconify-json/solar@1.1.10':
     resolution: {integrity: sha512-g+p9GbYrzfLkbcbs+TwBr42YvUeRgNUbVv0ZRi464MvlTWN9B/ekgFZszbIBqgjQT9GjfToQQLP6GOmDPDhLNw==}
 
+  '@iconify-json/tdesign@1.1.8':
+    resolution: {integrity: sha512-AuUQgdTiG2ED2oXqMhZwZ6wTkOXVAd+4YIJ/Samtx/wf5eKxZAXCGkL1OpFfA6enkzzRPaUkhskyKI6YAZ9oug==}
+
   '@iconify/collections@1.0.450':
     resolution: {integrity: sha512-h8cW4Ut1tAUCxr7wZBp8dwgive6IeY1OCYBraR23ismei7vFgx9FB9oNJvahhOYtIClqX0+BreJwOB05aYxejw==}
 
@@ -2274,14 +2272,14 @@ packages:
   '@vitest/utils@2.0.5':
     resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
 
-  '@volar/language-core@2.4.0-alpha.18':
-    resolution: {integrity: sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==}
+  '@volar/language-core@2.4.0-alpha.19':
+    resolution: {integrity: sha512-8H6x3vC0/SbOqy1cU0s7/Hk9nNH61t8qOoghjX7XpguLagEyjF6zkMp6C5F/sBlpr0WpeByc1KDfyBHumB8ZfA==}
 
-  '@volar/source-map@2.4.0-alpha.18':
-    resolution: {integrity: sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==}
+  '@volar/source-map@2.4.0-alpha.19':
+    resolution: {integrity: sha512-f86wTDVVjWUtaBcmFYTTLtWpBfooNfZmwvn73f+KXIchYqKgQVzOuGbORuVPwSrAjYLPW0f8Aa5Gb9TbdI17Ug==}
 
-  '@volar/typescript@2.4.0-alpha.18':
-    resolution: {integrity: sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==}
+  '@volar/typescript@2.4.0-alpha.19':
+    resolution: {integrity: sha512-Q7tfVVL3HmvUlqjcoTEk/6LiwlDF13XP8avAARovK4Qc6Djsckc+COLovr+ZX6kIxxTdM+Ggv9C0nCNFjMeiSQ==}
 
   '@voxpelli/config-array-find-files@0.1.2':
     resolution: {integrity: sha512-jOva73R+0Nc5/pyS/piBSjQzO4EehME7rPSkBpPC9PYSta+yj3OpF14v0m0HLLYLVNuyHbBjQh5QvGIZwTH2eA==}
@@ -2580,8 +2578,8 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@1.0.1:
-    resolution: {integrity: sha512-XdXKlmX3YIrGKJS7d324CAbswH+C1klMCIRQ4VRy0+iPxGeP2scVOoYd09/V6uGjGAi/ZuEwBLzT7xBerSKNQg==}
+  ast-kit@1.1.0:
+    resolution: {integrity: sha512-RlNqd4u6c/rJ5R+tN/ZTtyNrH8X0NHCvyt6gD8RHa3JjzxxHWoyaU0Ujk3Zjbh7IZqrYl1Sxm6XzZifmVxXxHQ==}
     engines: {node: '>=16.14.0'}
 
   ast-walker-scope@0.6.2:
@@ -7341,13 +7339,6 @@ snapshots:
     dependencies:
       postcss-selector-parser: 6.1.2
 
-  '@egoist/tailwindcss-icons@1.8.1(tailwindcss@3.4.10)':
-    dependencies:
-      '@iconify/utils': 2.1.30
-      tailwindcss: 3.4.10
-    transitivePeerDependencies:
-      - supports-color
-
   '@es-joy/jsdoccomment@0.46.0':
     dependencies:
       comment-parser: 1.4.1
@@ -7754,6 +7745,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/tdesign@1.1.8':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.450':
     dependencies:
       '@iconify/types': 2.0.0
@@ -8901,15 +8896,15 @@ snapshots:
       loupe: 3.1.1
       tinyrainbow: 1.2.0
 
-  '@volar/language-core@2.4.0-alpha.18':
+  '@volar/language-core@2.4.0-alpha.19':
     dependencies:
-      '@volar/source-map': 2.4.0-alpha.18
+      '@volar/source-map': 2.4.0-alpha.19
 
-  '@volar/source-map@2.4.0-alpha.18': {}
+  '@volar/source-map@2.4.0-alpha.19': {}
 
-  '@volar/typescript@2.4.0-alpha.18':
+  '@volar/typescript@2.4.0-alpha.19':
     dependencies:
-      '@volar/language-core': 2.4.0-alpha.18
+      '@volar/language-core': 2.4.0-alpha.19
       path-browserify: 1.0.1
       vscode-uri: 3.0.8
 
@@ -8923,7 +8918,7 @@ snapshots:
       '@babel/types': 7.25.2
       '@rollup/pluginutils': 5.1.0(rollup@2.79.1)
       '@vue/compiler-sfc': 3.4.38
-      ast-kit: 1.0.1
+      ast-kit: 1.1.0
       local-pkg: 0.5.0
       magic-string-ast: 0.6.2
     optionalDependencies:
@@ -9024,7 +9019,7 @@ snapshots:
 
   '@vue/language-core@2.0.29(typescript@5.5.4)':
     dependencies:
-      '@volar/language-core': 2.4.0-alpha.18
+      '@volar/language-core': 2.4.0-alpha.19
       '@vue/compiler-dom': 3.4.38
       '@vue/compiler-vue2': 2.7.16
       '@vue/shared': 3.4.38
@@ -9294,7 +9289,7 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-kit@1.0.1:
+  ast-kit@1.1.0:
     dependencies:
       '@babel/parser': 7.25.3
       pathe: 1.1.2
@@ -9302,7 +9297,7 @@ snapshots:
   ast-walker-scope@0.6.2:
     dependencies:
       '@babel/parser': 7.25.3
-      ast-kit: 1.0.1
+      ast-kit: 1.1.0
 
   async-sema@3.1.1: {}
 
@@ -13477,7 +13472,7 @@ snapshots:
 
   vue-tsc@2.0.29(typescript@5.5.4):
     dependencies:
-      '@volar/typescript': 2.4.0-alpha.18
+      '@volar/typescript': 2.4.0-alpha.19
       '@vue/language-core': 2.0.29(typescript@5.5.4)
       semver: 7.6.3
       typescript: 5.5.4
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1f0b6f4..ba31605 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,4 @@
-import { getIconCollections, iconsPlugin } from "@egoist/tailwindcss-icons";
 import type { Config } from "tailwindcss";
-import luontoIcons from "./luontoIcons.json";
-
-const iconCollections = {
-  ...getIconCollections(["material-symbols", "mdi", "mingcute", "ph", "solar"]),
-  luonto: {
-    icons: luontoIcons,
-  },
-};
 
 export default {
   theme: {
@@ -18,32 +9,4 @@ export default {
     },
   },
   content: [],
-  plugins: [
-    iconsPlugin({
-      collections: iconCollections,
-      // might solve stretch bug on generate, see https://github.com/egoist/tailwindcss-icons/issues/23
-      extraProperties: {
-        "-webkit-mask-size": "contain",
-        "-webkit-mask-position": "center",
-      },
-    }),
-    iconsPlugin({
-      prefix: "ix",
-      collections: iconCollections,
-      extraProperties: {
-        display: undefined,
-        width: undefined,
-        height: undefined,
-        "background-color": undefined,
-        mask: undefined,
-        "mask-image": undefined,
-        "mask-repeat": undefined,
-        "mask-size": undefined,
-        "-webkit-mask": undefined,
-        "-webkit-mask-image": undefined,
-        "-webkit-mask-repeat": undefined,
-        "-webkit-mask-size": undefined,
-      } as any,
-    }),
-  ],
 } satisfies Config;