fix(enhanced-readabilities): [unocss] failed to load icon (#217)

nolebase · May 17, 2024 · 9e00abb · 9e00abb
1 parent 9e6d729
commit 9e00abb
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 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
@@ -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/...-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue b/...-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/...gin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue b/...gin-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
@@ -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/...ages/vitepress-plugin-enhanced-readabilities/src/client/components/ScreenLayoutSwitch.vue b/...ages/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
@@ -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
@@ -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
@@ -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
@@ -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"