fix: make sure button/link icons always have correct size

Author: essenmitsosse

app/components/Button/Base.vue

@@ -53,11 +53,7 @@ defineExpose({
     "
     :aria-keyshortcuts="keyshortcut"
   >
-    <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
       v-if="keyshortcut"

app/components/Link/Base.vue

@@ -12,7 +12,6 @@ const props = withDefaults(
       'type'?: never
       'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
-      'iconSize'?: 'sm' | 'md' | 'lg'
 
       'keyshortcut'?: string
 
@@ -52,21 +51,11 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
-const ICON_SIZE_MAP = {
-  sm: 'size-3 min-w-3',
-  md: 'size-4 min-w-4',
-  lg: 'size-5 min-w-5',
-}
-
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => props.variant !== 'link')
 const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
 const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
-
-const iconSizeClass = computed(
-  () => ICON_SIZE_MAP[props.iconSize || (isButtonSmall.value && 'sm') || 'md'],
-)
 </script>
 
 <template>
@@ -100,22 +89,22 @@ const iconSizeClass = computed(
     :aria-keyshortcuts="keyshortcut"
     :target="isLinkExternal ? '_blank' : undefined"
   >
-    <span v-if="classicon" class="me-1" :class="[iconSizeClass, classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="me-1 size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
       v-if="isLinkExternal && !classicon"
-      class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
+      class="i-carbon:launch rtl-flip size-[1em] opacity-50"
       aria-hidden="true"
     />
     <span
       v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link w-3 h-3 opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
     <kbd
       v-if="keyshortcut"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ keyshortcut }}

app/components/Package/Versions.vue

@@ -369,7 +369,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       : row.primaryVersion.version
                   "
                   :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                  icon-size="sm"
                 >
                   <span dir="ltr">
                     {{ row.primaryVersion.version }}
@@ -423,7 +422,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     : v.version
                 "
                 :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
                 <span dir="ltr">
                   {{ v.version }}
@@ -525,7 +523,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     : row.primaryVersion.version
                 "
                 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
                 <span dir="ltr">
                   {{ row.primaryVersion.version }}
@@ -602,7 +599,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}
@@ -664,7 +660,6 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
                       <span dir="ltr">
                         {{ group.versions[0]?.version }}

app/components/Tag/Static.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
-    <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
   </component>
 </template>