refactor(Icon): migrate to script setup syntax

Author: bnjm

src/components/Icon.vue

@@ -1,8 +1,4 @@
 <script lang="ts">
-import { defineComponent, computed, type PropType } from 'vue'
-import icons, { DEPRECATED_ICONS } from './icons'
-import { type IconSize, type IconIdentifier, type AnyIconName } from './icons/types'
-
 export type {
   IconSize,
   IconName,
@@ -17,79 +13,82 @@ export type {
   LgIconId,
   OtherIconId
 } from './icons/types'
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import icons, { DEPRECATED_ICONS } from './icons'
+import { type IconSize, type IconIdentifier, type AnyIconName } from './icons/types'
 
-export default defineComponent({
-  name: 'AIcon',
-  props: {
+defineOptions({
+  name: 'AIcon'
+})
+
+const props = withDefaults(
+  defineProps<{
     /**
-     * Type-safe icon identifier in format "name-size" (e.g., "search-sm", "check-md")
+     * Type-safe icon identifier in format "name-size" (e.g., "search-sm", "check-md").
      * This is the recommended way to specify icons as it enforces valid name+size combinations.
      */
-    icon: {
-      type: String as PropType<IconIdentifier>,
-      default: undefined
-    },
+    icon?: IconIdentifier
     /**
-     * @deprecated Use `icon` prop instead (e.g., icon="search-sm")
-     * Icon name in PascalCase (e.g. ArrowDown, Warning) or camelCase (e.g. arrowDown, warning)
+     * @deprecated Use `icon` prop instead (e.g., icon="search-sm").
+     * Icon name in PascalCase (e.g. ArrowDown, Warning) or camelCase (e.g. arrowDown, warning).
      */
-    name: {
-      type: String as PropType<AnyIconName>,
-      default: undefined
-    },
+    name?: AnyIconName
     /**
-     * @deprecated Use `icon` prop instead (e.g., icon="search-sm")
-     * Icon size - used to set width and height on an `svg` element
+     * @deprecated Use `icon` prop instead (e.g., icon="search-sm").
+     * Icon size - used to set width and height on an `svg` element.
      */
-    size: {
-      type: String as PropType<IconSize>,
-      default: 'md'
-    }
-  },
-  setup(props) {
-    const iconComponent = computed(() => {
-      let size: IconSize
-      let name: string
+    size?: IconSize
+  }>(),
+  {
+    icon: undefined,
+    name: undefined,
+    size: 'md'
+  }
+)
 
-      if (props.icon) {
-        // New format: "search-sm" -> extract size from suffix
-        const lastDash = props.icon.lastIndexOf('-')
-        size = props.icon.slice(lastDash + 1) as IconSize
-        // Convert kebab-case name to PascalCase: "arrow-left" -> "ArrowLeft"
-        name = props.icon
-          .slice(0, lastDash)
-          .split('-')
-          .map(s => s.charAt(0).toUpperCase() + s.slice(1))
-          .join('')
-      } else if (props.name) {
-        // Legacy format
-        size = props.size
-        // Capitalize first letter to handle camelCase input
-        name = props.name.charAt(0).toUpperCase() + props.name.slice(1)
-      } else {
-        console.error('[Honeycomb] a-icon: either icon or name prop is required')
-        return null
-      }
+const iconComponent = computed(() => {
+  let size: IconSize
+  let name: string
 
-      if (DEPRECATED_ICONS[size].includes(name)) {
-        console.warn(
-          `Icon "${name}" in size "${size}" is deprecated and will be removed in the next major version.
-          Use another supported size or alternative icon, see storybook docs https://honeycomb.archilogic.com`
-        )
-      }
+  if (props.icon) {
+    // New format: "search-sm" -> extract size from suffix
+    const lastDash = props.icon.lastIndexOf('-')
+    size = props.icon.slice(lastDash + 1) as IconSize
+    // Convert kebab-case name to PascalCase: "arrow-left" -> "ArrowLeft"
+    name = props.icon
+      .slice(0, lastDash)
+      .split('-')
+      .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+      .join('')
+  } else if (props.name) {
+    // Legacy format
+    size = props.size
+    // Capitalize first letter to handle camelCase input
+    name = props.name.charAt(0).toUpperCase() + props.name.slice(1)
+  } else {
+    console.error('[Honeycomb] a-icon: either icon or name prop is required')
+    return null
+  }
 
-      if (icons[size][name]) {
-        return icons[size][name]
-      } else {
-        console.error(`Icon ${name} of size ${size} does not exist.`, 'Available icons', icons)
-        return null
-      }
-    })
+  if (DEPRECATED_ICONS[size].includes(name)) {
+    console.warn(
+      `Icon "${name}" in size "${size}" is deprecated and will be removed in the next major version.
+      Use another supported size or alternative icon, see storybook docs https://honeycomb.archilogic.com`
+    )
+  }
 
-    return { iconComponent }
+  if (icons[size][name]) {
+    return icons[size][name]
+  } else {
+    console.error(`Icon ${name} of size ${size} does not exist.`, 'Available icons', icons)
+    return null
   }
 })
 </script>
+
 <template>
   <component :is="iconComponent" v-if="iconComponent" aria-hidden class="flex-shrink-0" />
 </template>