From 9e00abb1d9afaad6389e5e35526689ebc0a04c21 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 17 May 2024 15:03:36 +0800
Subject: [PATCH] fix(enhanced-readabilities): [unocss] failed to load icon
 (#217)

---
 .../src/client/components/LayoutSwitch.vue                | 7 +++++--
 .../LayoutSwitchContentLayoutMaxWidthSlider.vue           | 8 ++++++--
 .../components/LayoutSwitchPageLayoutMaxWidthSlider.vue   | 7 +++++--
 .../src/client/components/MenuTitle.vue                   | 3 +--
 .../src/client/components/ScreenLayoutSwitch.vue          | 7 +++++--
 .../src/client/components/ScreenMenu.vue                  | 7 +++++--
 .../src/client/components/ScreenSpotlight.vue             | 7 +++++--
 .../src/client/components/Spotlight.vue                   | 7 +++++--
 .../src/client/components/SpotlightStyles.vue             | 7 +++++--
 9 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue
index 30d5d05a..13411dba 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue
@@ -125,13 +125,16 @@ onMounted(() => {
   <div space-y-2 role="radiogroup">
     <div ref="menuTitleElementRef" flex items-center>
       <MenuTitle
-        icon="i-icon-park-outline:layout-one"
         :title="t('layoutSwitch.title')"
         :aria-label="t('layoutSwitch.titleAriaLabel') || t('layoutSwitch.title')"
         flex="1"
         :disabled="disabled"
         pr-4
-      />
+      >
+        <template #icon>
+          <span i-icon-park-outline:layout-one mr-1 aria-hidden="true" />
+        </template>
+      </MenuTitle>
       <MenuHelp
         v-if="!options.layoutSwitch?.disableHelp"
         v-model:is-popped-up="isMenuHelpPoppedUp"
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
index 338c225f..8a510238 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
@@ -106,13 +106,17 @@ watch(maxWidthValue, (val) => {
     >
       <div ref="menuTitleElementRef" flex items-center>
         <MenuTitle
-          icon="i-icon-park-outline:auto-line-width"
           :title="t('layoutSwitch.contentLayoutMaxWidth.title')"
           :aria-label="t('layoutSwitch.contentLayoutMaxWidth.titleAriaLabel') || t('layoutSwitch.contentLayoutMaxWidth.title')"
           :disabled="disabled"
           flex="1"
           pr-4
-        />
+        >
+          <template #icon>
+            <span i-icon-park-outline:layout-one mr-1 aria-hidden="true" />
+          </template>
+          <span i-icon-park-outline:auto-line-width />
+        </MenuTitle>
         <MenuHelp
           v-if="!options.layoutSwitch?.contentLayoutMaxWidth?.disableHelp"
           v-model:is-popped-up="isMenuHelpPoppedUp"
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue
index 4e86cd8a..51c5cafd 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue
@@ -105,13 +105,16 @@ watch(maxWidthValue, (val) => {
     >
       <div ref="menuTitleElementRef" flex items-center>
         <MenuTitle
-          icon="i-icon-park-outline:auto-width-one"
           :title="t('layoutSwitch.pageLayoutMaxWidth.title')"
           :aria-label="t('layoutSwitch.pageLayoutMaxWidth.titleAriaLabel') || t('layoutSwitch.pageLayoutMaxWidth.title')"
           :disabled="disabled"
           flex="1"
           pr-2
-        />
+        >
+          <template #icon>
+            <span i-icon-park-outline:auto-width-one mr-1 aria-hidden="true" />
+          </template>
+        </MenuTitle>
         <MenuHelp
           v-if="!options.layoutSwitch?.pageLayoutMaxWidth?.disableHelp"
           v-model:is-popped-up="isMenuHelpPoppedUp"
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/MenuTitle.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/MenuTitle.vue
index 5aa6b614..486c1adf 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/MenuTitle.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/MenuTitle.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
   title?: string
-  icon?: string
   disabled?: boolean
 }>()
 </script>
@@ -14,7 +13,7 @@ const props = defineProps<{
     text="[14px] $vp-nolebase-enhanced-readabilities-menu-text-color"
     inline-flex select-none items-center align-middle font-medium
   >
-    <span v-if="props.icon" :class="props.icon" mr-1 aria-hidden="true" />
+    <slot name="icon" />
     <span v-if="props.title">{{ props.title }}</span>
     <slot />
   </h3>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenLayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenLayoutSwitch.vue
index 8e5be898..3a210747 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenLayoutSwitch.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenLayoutSwitch.vue
@@ -44,11 +44,14 @@ const fieldOptions = computed(() => [
 <template>
   <div space-y-2>
     <MenuTitle
-      icon="i-icon-park-outline:layout-one"
       :title="t('layoutSwitch.title')"
       :aria-label="t('layoutSwitch.titleAriaLabel') || t('layoutSwitch.title')"
       disabled
-    />
+    >
+      <template #icon>
+        <slot i-icon-park-outline:layout-one mr-1 aria-hidden="true" />
+      </template>
+    </MenuTitle>
     <div border="1 red/50 solid" bg="red/30" flex items-center rounded-lg p-2 opacity-50>
       <span text-xs>{{ t('layoutSwitch.titleScreenNavWarningMessage') }}</span>
     </div>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenMenu.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenMenu.vue
index e8e6ba00..c0927dc5 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenMenu.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenMenu.vue
@@ -12,10 +12,13 @@ const { t } = useI18n()
 <template>
   <div v-if="mounted" space-y-2 class="VPNolebaseEnhancedReadabilitiesMenu">
     <MenuTitle
-      icon="i-icon-park-outline:book-open"
       :title="t('title.title')"
       :aria-label="t('title.titleAriaLabel') || t('title.title')"
-    />
+    >
+      <template #icon>
+        <span i-icon-park-outline:book-open mr-1 aria-hidden="true" />
+      </template>
+    </MenuTitle>
     <div flex="~ col" pl-4 space-y-2>
       <ScreenLayoutSwitch />
       <ScreenSpotlight />
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenSpotlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenSpotlight.vue
index 6ef5de94..4df25050 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenSpotlight.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenSpotlight.vue
@@ -29,11 +29,14 @@ const fieldOptions = computed(() => [
 <template>
   <div space-y-2>
     <MenuTitle
-      icon="i-icon-park-outline:click"
       :title="t('spotlight.title')"
       :aria-label="t('spotlight.titleAriaLabel') || t('spotlight.title')"
       disabled
-    />
+    >
+      <template #icon>
+        <span i-icon-park-outline:click mr-1 aria-hidden="true" />
+      </template>
+    </MenuTitle>
     <div border="1 red/50 solid" bg="red/30" flex items-center rounded-lg p-2 opacity-50>
       <span text-xs>{{ t('spotlight.titleScreenNavWarningMessage') }}</span>
     </div>
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue
index 3dd3b42d..984b8d91 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/Spotlight.vue
@@ -54,13 +54,16 @@ watch(isTouchScreen, () => {
     />
     <div ref="menuTitleElementRef" relative flex items-center>
       <MenuTitle
-        icon="i-icon-park-outline:click"
         :title="t('spotlight.title')"
         :aria-label="t('spotlight.titleAriaLabel') || t('spotlight.title')"
         :disabled="disabled"
         flex="1"
         pr-4
-      />
+      >
+        <template #icon>
+          <span i-icon-park-outline:click mr-1 aria-hidden="true" />
+        </template>
+      </MenuTitle>
       <MenuHelp
         v-if="!options.spotlight?.disableHelp"
         v-model:is-popped-up="isMenuHelpPoppedUp"
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue
index 119278f2..43cbc6f7 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/client/components/SpotlightStyles.vue
@@ -56,13 +56,16 @@ watch(isTouchScreen, () => {
     >
       <div ref="menuTitleElementRef" relative flex items-center>
         <MenuTitle
-          icon="i-icon-park-outline:click"
           :title="t('spotlight.styles.title')"
           :aria-label="t('spotlight.styles.titleAriaLabel') || t('spotlight.styles.title')"
           :disabled="disabled"
           flex="1"
           pr-4
-        />
+        >
+          <template #icon>
+            <span i-icon-park-outline:click mr-1 aria-hidden="true" />
+          </template>
+        </MenuTitle>
         <MenuHelp
           v-if="!options.spotlight?.disableHelp"
           v-model:is-popped-up="isMenuHelpPoppedUp"