feat(Icon,Button): add type-safe icon props with IconIdentifier

Author: bnjm

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+# [2.23.0-test-icon-props.1](https://github.com/archilogic-com/honeycomb/compare/v2.22.0...v2.23.0-test-icon-props.1) (2025-12-18)
+
+
+### Features
+
+* **Combobox,Listbox,Switcher:** add generic type support for options ([039f79b](https://github.com/archilogic-com/honeycomb/commit/039f79b209d9f10ee7561282a2eb63c4de5c9b9b))
+* **Icon,Button:** add type-safe icon props with IconIdentifier ([708e493](https://github.com/archilogic-com/honeycomb/commit/708e493dc64ba459a71c11d0289ddb29bf0592ac))
+
 ## [2.22.1-test-skip-pre-release.1](https://github.com/archilogic-com/honeycomb/compare/v2.22.0...v2.22.1-test-skip-pre-release.1) (2025-12-11)
 
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@archilogic/honeycomb",
-  "version": "2.22.1-test-skip-pre-release.1",
+  "version": "2.23.0-test-icon-props.2",
   "publishConfig": {
     "access": "public"
   },
@@ -54,7 +54,8 @@
     "format": "prettier . -w -u --loglevel silent",
     "codecheck": "npm run typecheck && npm run lint && npm run format",
     "chromatic": "chromatic --exit-zero-on-changes",
-    "test": "vitest"
+    "test": "vitest",
+    "generate:icon-types": "npx tsx scripts/generate-icon-types.ts"
   },
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",

package.json

@@ -0,0 +1,71 @@
+import { readdirSync, writeFileSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const ICONS_DIR = join(__dirname, '../src/components/icons')
+const OUTPUT_FILE = join(ICONS_DIR, 'types.ts')
+
+const sizes = ['sm', 'md', 'lg', 'other'] as const
+
+function getIconNames(size: string): string[] {
+  const dir = join(ICONS_DIR, size)
+  return readdirSync(dir)
+    .filter(f => f.endsWith('.svg'))
+    .map(f => f.replace('.svg', ''))
+    .sort()
+}
+
+function generateUnionType(name: string, icons: string[]): string {
+  if (icons.length === 0) return `export type ${name} = never`
+  return `export type ${name} =\n${icons.map(i => `  | '${i}'`).join('\n')}`
+}
+
+const iconsBySize = Object.fromEntries(sizes.map(s => [s, getIconNames(s)]))
+
+const output = `// This file is auto-generated by scripts/generate-icon-types.ts
+// Do not edit manually. Run \`npm run generate:icon-types\` to regenerate.
+
+${generateUnionType('SmIcon', iconsBySize.sm)}
+
+${generateUnionType('MdIcon', iconsBySize.md)}
+
+${generateUnionType('LgIcon', iconsBySize.lg)}
+
+${generateUnionType('OtherIcon', iconsBySize.other)}
+
+export type IconSize = 'sm' | 'md' | 'lg' | 'other'
+
+export type IconName<S extends IconSize> = S extends 'sm'
+  ? SmIcon
+  : S extends 'md'
+    ? MdIcon
+    : S extends 'lg'
+      ? LgIcon
+      : S extends 'other'
+        ? OtherIcon
+        : never
+
+export type AnyIcon = SmIcon | MdIcon | LgIcon | OtherIcon
+export type AnyIconName = AnyIcon | Uncapitalize<AnyIcon>
+
+type KebabCase<S extends string> = S extends \`\${infer First}\${infer Rest}\`
+  ? Rest extends Uncapitalize<Rest>
+    ? \`\${Lowercase<First>}\${KebabCase<Rest>}\`
+    : \`\${Lowercase<First>}-\${KebabCase<Rest>}\`
+  : S
+
+export type SmIconId = \`\${KebabCase<SmIcon>}-sm\`
+export type MdIconId = \`\${KebabCase<MdIcon>}-md\`
+export type LgIconId = \`\${KebabCase<LgIcon>}-lg\`
+export type OtherIconId = \`\${KebabCase<OtherIcon>}-other\`
+
+export type IconIdentifier = SmIconId | MdIconId | LgIconId | OtherIconId
+`
+
+writeFileSync(OUTPUT_FILE, output)
+console.log(`Generated ${OUTPUT_FILE}`)
+console.log(`  sm: ${iconsBySize.sm.length} icons`)
+console.log(`  md: ${iconsBySize.md.length} icons`)
+console.log(`  lg: ${iconsBySize.lg.length} icons`)
+console.log(`  other: ${iconsBySize.other.length} icons`)

scripts/generate-icon-types.ts

@@ -2,11 +2,16 @@
 import { computed, defineComponent, PropType } from 'vue'
 import ASpinner from './Spinner.vue'
 import AIcon from './Icon.vue'
+import { type IconIdentifier, type AnyIconName } from './icons/types'
 
 type ButtonVariant = 'primary' | 'subtle' | 'standard'
 
 type ButtonSize = 'sm' | 'md' | 'lg' | 'auto'
 
+const isIconIdentifier = (str: string): boolean => {
+  return /-(sm|md|lg|other)$/.test(str)
+}
+
 export default defineComponent({
   name: 'AButton',
   components: { ASpinner, AIcon },
@@ -41,15 +46,9 @@ export default defineComponent({
       type: String as PropType<ButtonSize>,
       default: 'md'
     },
-    /**
-     * deprecated usage: Boolean
-     * removes horizontal padding, use size `auto` instead
-     *
-     * recommended usage: icon name as a String
-     * the icon size will be inferred from the button size prop
-     */
+    /** IconIdentifier (e.g., "search-sm") or icon name (e.g., "Search") */
     icon: {
-      type: [Boolean, String],
+      type: [Boolean, String] as PropType<boolean | AnyIconName | IconIdentifier>,
       default: false
     },
     /**
@@ -99,18 +98,15 @@ export default defineComponent({
       return tagName.value === 'button' && (props.disabled || props.loading)
     })
 
-    const iconName = computed(() => {
-      if (typeof props.icon === 'string' && props.icon.length) {
-        return props.icon
+    const resolvedIconIdentifier = computed(() => {
+      if (typeof props.icon !== 'string' || !props.icon.length) {
+        return undefined
       }
-      return undefined
-    })
-
-    const iconSize = computed(() => {
-      if (props.size === 'auto') {
-        return 'other'
+      if (isIconIdentifier(props.icon)) {
+        return props.icon as IconIdentifier
       }
-      return props.size
+      const iconSize = props.size === 'auto' ? 'other' : props.size
+      return `${props.icon}-${iconSize}` as IconIdentifier
     })
 
     const ariaLabel = computed(() => {
@@ -123,8 +119,7 @@ export default defineComponent({
     return {
       tagName,
       isDisabled,
-      iconName,
-      iconSize,
+      resolvedIconIdentifier,
       ariaLabel
     }
   }
@@ -164,9 +159,7 @@ export default defineComponent({
         the value of label prop or an icon
       -->
         <slot>
-          <template v-if="!!(iconName && iconSize)">
-            <a-icon :name="iconName" :size="iconSize"></a-icon>
-          </template>
+          <a-icon v-if="resolvedIconIdentifier" :icon="resolvedIconIdentifier"></a-icon>
           <template v-else>{{ label }}</template>
         </slot>
       </div>

src/components/Button.vue

@@ -1,50 +1,91 @@
 <script lang="ts">
-import { defineComponent, PropType, capitalize as capitalizeFirstLetter } from 'vue'
-import icons, { IconSize, DEPRECATED_ICONS } from './icons'
+export type {
+  IconSize,
+  IconName,
+  SmIcon,
+  MdIcon,
+  LgIcon,
+  OtherIcon,
+  AnyIcon,
+  AnyIconName,
+  IconIdentifier,
+  SmIconId,
+  MdIconId,
+  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'
+
+defineOptions({
+  name: 'AIcon'
+})
 
-export default defineComponent({
-  name: 'AIcon',
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
-     * icon name in PascalCase (e.g. ArrowDown, Warning) or camelCase (e.g. arrowDown, warning)
-     * together with the size identifies the correct icon to load
+     * 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.
      */
-    name: {
-      type: String,
-      required: true
-    },
+    icon?: IconIdentifier
     /**
-     * icon size - used to set width and height on an `svg` element
-     * currently used sizes: `sm`: 1rem/16px, `md` (default): 2rem/32px, `lg`: 2.5rem/40px, `other`: various sizes for special cases
+     * @deprecated Use `icon` prop instead (e.g., icon="search-sm").
+     * Icon name in PascalCase (e.g. ArrowDown, Warning) or camelCase (e.g. arrowDown, warning).
      */
-    size: {
-      type: String as PropType<IconSize>,
-      default: 'md'
-    }
-  },
-  computed: {
-    iconComponent() {
-      // need to use the props directly inside the computed function,
-      // so that Vue tracks changes
-      // https://stackoverflow.com/a/58577362/6917800
-      const size = this.size
-      const name = capitalizeFirstLetter(this.name) // allow camelCase name
-      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 (icons[size][name]) {
-        return icons[size][name]
-      } else {
-        console.error(`Icon ${name} of size ${size} does not exist.`, 'Available icons', icons)
-        return null
-      }
-    }
+    name?: AnyIconName
+    /**
+     * @deprecated Use `icon` prop instead (e.g., icon="search-sm").
+     * Icon size - used to set width and height on an `svg` element.
+     */
+    size?: IconSize
+  }>(),
+  {
+    icon: undefined,
+    name: undefined,
+    size: 'md'
+  }
+)
+
+const iconComponent = computed(() => {
+  let size: IconSize
+  let name: string
+
+  if (props.icon) {
+    const lastDash = props.icon.lastIndexOf('-')
+    size = props.icon.slice(lastDash + 1) as IconSize
+    name = props.icon
+      .slice(0, lastDash)
+      .split('-')
+      .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+      .join('')
+  } else if (props.name) {
+    size = props.size
+    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 (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 (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>

src/components/Icon.vue

@@ -10,6 +10,7 @@ import { computed } from 'vue'
 import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
 import AIcon from './Icon.vue'
 import { type SwitcherOption } from '../types/selection'
+import { type SmIcon, type SmIconId } from './icons/types'
 
 const props = withDefaults(
   defineProps<{
@@ -60,7 +61,11 @@ const model = computed({
         :aria-label="option.icon ? option.label : undefined"
         :title="option.icon ? option.label : undefined">
         <slot :name="String(option.value)">
-          <a-icon v-if="option.icon" :name="option.icon" size="sm"></a-icon>
+          <a-icon
+            v-if="option.icon"
+            :icon="option.icon.endsWith('-sm') ? (option.icon as SmIconId) : undefined"
+            :name="option.icon.endsWith('-sm') ? undefined : (option.icon as SmIcon)"
+            :size="option.icon.endsWith('-sm') ? undefined : 'sm'"></a-icon>
           <template v-else>
             {{ option.label }}
           </template>

src/components/Switcher.vue

@@ -1,5 +1,6 @@
 import { Component } from 'vue'
-export type IconSize = 'sm' | 'md' | 'lg' | 'other'
+import { type IconSize } from './types'
+export type { IconSize } from './types'
 
 const iconModules: Record<string, { default: Component }> = import.meta.glob('./**/*.svg', {
   eager: true