Rewrite AppIcon from Vue SFC to TSX

src/components/app/AppButtonGroup.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, type PropType } from 'vue'
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 
 export interface ButtonGroupItem {
   text?: string

src/components/app/AppIcon.tsx

@@ -0,0 +1,38 @@
+import { defineComponent, computed, h, type Component } from 'vue'
+
+const icons = import.meta.glob('@/assets/icons/*.svg', {
+  eager: true,
+  import: 'default',
+  query: '?component'
+}) as Record<string, Component>
+
+export default defineComponent({
+  name: 'AppIcon',
+
+  inheritAttrs: false,
+
+  props: {
+    name: { type: String, default: 'heart' }
+  },
+
+  emits: {
+    click: (_event: MouseEvent) => true
+  },
+
+  setup(props, { attrs, emit }) {
+    const icon = computed(() => {
+      const key = Object.keys(icons).find((k) => k.endsWith(`/${props.name}.svg`))
+      return key ? icons[key] : null
+    })
+
+    return () => {
+      if (icon.value) {
+        return h(icon.value as any, {
+          ...attrs,
+          onClick: (event: MouseEvent) => emit('click', event)
+        })
+      }
+      return <div class="widget-user-image" style={`background-image: url(${props.name})`} />
+    }
+  }
+})

src/components/app/AppIcon.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { Component } from 'vue'
-
-const props = defineProps({
-  name: { type: String, default: 'heart' }
-})
-
-const emit = defineEmits<{ click: [event: MouseEvent] }>()
-
-defineOptions({ inheritAttrs: false })
-
-const icons = import.meta.glob('@/assets/icons/*.svg', {
-  eager: true,
-  import: 'default',
-  query: '?component'
-}) as Record<string, Component>
-
-const icon = computed(() => {
-  const key = Object.keys(icons).find((k) => k.endsWith(`/${props.name}.svg`))
-  return key ? icons[key] : null
-})
-</script>
-
-<template>
-  <component :is="icon" v-bind="$attrs" @click="emit('click', $event as MouseEvent)" v-if="icon" />
-  <div v-else class="widget-user-image" :style="`background-image: url(${name})`" />
-</template>

src/components/app/AppMenu.tsx

@@ -1,4 +1,4 @@
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
 import { usePageStore } from '@/store/page'
 import { useAppStore } from '@/store/app'

src/components/app/AppSelector.tsx

@@ -1,4 +1,4 @@
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 import { ArrowBigUp } from '@lucide/vue'
 import { defineComponent, computed, ref, type PropType } from 'vue'
 import { usePageStore } from '@/store/page'

src/components/base/AppBar.tsx

@@ -5,7 +5,7 @@ import { useSystemInfo } from '@/composables/useSystemInfo'
 import { useAppStore } from '@/store/app'
 import { usePageStore } from '@/store/page'
 import { getDesktopIcon, systemActionsObject } from '@/utils/helper'
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 import timeRef, { timePresets, type TimePreset } from '@/utils/time'
 
 export default defineComponent({

src/components/base/GithubButton.tsx

@@ -1,4 +1,4 @@
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 import { defineComponent } from 'vue'
 import AppButton from '@/components/app/AppButton'
 

src/plugins/components.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import AppIcon from '@/components/app/AppIcon.vue'
+import AppIcon from '@/components/app/AppIcon'
 
 export function registerComponents(app: App) {
   app.component('AppIcon', AppIcon)