fix(theme): allow wrapping feature icons

closes #2923
vuejs · Sep 10, 2023 · a1e1267 · a1e1267
1 parent b277beb
commit a1e1267
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/client/theme-default/components/VPFeature.vue b/src/client/theme-default/components/VPFeature.vue
@@ -25,8 +25,16 @@ defineProps<{
     :tag="link ? 'a' : 'div'"
   >
     <article class="box">
+      <div v-if="typeof icon === 'object' && icon.wrap" class="icon">
+        <VPImage
+          :image="icon"
+          :alt="icon.alt"
+          :height="icon.height || 48"
+          :width="icon.width || 48"
+        />
+      </div>
       <VPImage
-        v-if="typeof icon === 'object'"
+        v-else-if="typeof icon === 'object'"
         :image="icon"
         :alt="icon.alt"
         :height="icon.height || 48"
@@ -66,7 +74,7 @@ defineProps<{
   height: 100%;
 }
 
-.VPFeature:deep(.VPImage) {
+.box > :deep(.VPImage) {
   margin-bottom: 20px;
 }
 

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -190,13 +190,20 @@ export namespace DefaultTheme {
 
   export type FeatureIcon =
     | string
-    | { src: string; alt?: string; width?: string; height: string }
+    | {
+        src: string
+        alt?: string
+        width?: string
+        height?: string
+        wrap?: boolean
+      }
     | {
         light: string
         dark: string
         alt?: string
         width?: string
-        height: string
+        height?: string
+        wrap?: boolean
       }
 
   // sidebar -------------------------------------------------------------------