fix page icon

Author: zernonia

src/blocks/helpers/page-icon.vue

@@ -1,37 +1,30 @@
 <script setup lang="ts">
-import { useNotionBlock, defineNotionProps } from "@/lib/blockable"
-import { getTextContent } from "@/lib/utils"
-import DefaultPageIcon from "./default-page-icon.vue"
+import { useNotionBlock, defineNotionProps } from "@/lib/blockable";
+import { getTextContent } from "@/lib/utils";
+import DefaultPageIcon from "./default-page-icon.vue";
 
-const props = defineProps({ big: Boolean, ...defineNotionProps })
+const props = defineProps({ big: Boolean, ...defineNotionProps });
 //@ts-ignore
-const { icon, format, block, title } = useNotionBlock(props)
+const { icon, format, block, title } = useNotionBlock(props);
 </script>
 
 <script lang="ts">
 export default {
   name: "NotionPageIcon",
-}
+};
 </script>
 
 <template>
-  <img
-    v-if="icon?.includes('http')"
-    :class="[format.page_cover && 'notion-page-icon-offset', big ? 'notion-page-icon-cover' : 'notion-page-icon']"
-    :src="props.mapImageUrl(icon, block)"
-    :alt="title ? getTextContent(title) : 'Icon'"
-  />
-  <span
-    v-else-if="icon"
-    role="img"
-    :aria-label="icon"
-    :class="[
-      'notion-emoji',
-      format.page_cover && 'notion-page-icon-offset',
-      big ? 'notion-page-icon-cover' : 'notion-page-icon',
-    ]"
-  >
-    {{ icon }}
-  </span>
-  <DefaultPageIcon class="notion-page-icon" v-else-if="!big"></DefaultPageIcon>
+  <div :class="[format.page_cover && 'notion-page-icon-offset', big ? 'notion-page-icon-cover' : 'notion-page-icon']">
+    <img
+      v-if="icon?.includes('http')"
+      :src="props.mapImageUrl(icon, block)"
+      :alt="title ? getTextContent(title) : 'Icon'"
+      class="notion-page-icon"
+    />
+    <span v-else-if="icon" role="img" :aria-label="icon" class="notion-page-icon">
+      {{ icon }}
+    </span>
+    <DefaultPageIcon class="notion-page-icon" v-else-if="!big"></DefaultPageIcon>
+  </div>
 </template>

src/style.css

@@ -573,7 +573,7 @@
   max-height: 124px;
 }
 
-span.notion-page-icon-cover {
+.notion-page-icon-cover span {
   height: 78px;
   width: 78px;
   font-size: 78px;
@@ -582,18 +582,18 @@ span.notion-page-icon-cover {
   margin-left: 0px;
 }
 
-span.notion-page-icon-offset {
+.notion-page-icon-offset span {
   margin-top: -42px;
 }
 
-img.notion-page-icon-cover {
+.notion-page-icon-cover img {
   border-radius: 3px;
   width: 124px;
   height: 124px;
   margin: 8px;
 }
 
-img.notion-page-icon-offset {
+.notion-page-icon-offset img {
   margin-top: -80px;
 }