fix(Avatar): use resolved size for image width/height

Author: IgorShevchik

CHANGELOG.md

@@ -7,6 +7,7 @@
 * fix(Error): support `status` and `statusText` properties
 * fix(ContentSurround): handle RTL mode
 * chore(deps): update dependency reka-ui to v2.9.0
+* fix(Avatar): use resolved size for image width/height
 
 ## [2.5.3](https://github.com/bitrix24/b24ui/compare/v2.5.2...v2.5.3) (2026-03-30)
 

src/runtime/components/Avatar.vue

@@ -77,17 +77,17 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...(appConfig.b24ui?.avatar
   size: size.value
 }))
 
-const sizePx = computed(() => ({
-  '3xs': 10,
-  '2xs': 14,
-  'xs': 18,
-  'sm': 22,
-  'md': 32,
-  'lg': 42,
-  'xl': 48,
-  '2xl': 60,
-  '3xl': 94
-})[props.size || 'md'])
+const rootClass = computed(() => b24ui.value.root({ class: [uiProp.value?.root, props.class] }))
+
+const sizePx = computed(() => {
+  const sizeClass = rootClass.value.split(' ').find(c => /^size-\d+$/.test(c))
+  if (sizeClass) {
+    const num = Number.parseFloat(sizeClass.split('-')[1] ?? '')
+    if (!Number.isNaN(num)) return num * 4
+  }
+
+  return null
+})
 
 const error = ref(false)
 
@@ -108,7 +108,7 @@ function onError() {
     :as="as.root"
     v-bind="props.chip ? (typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true }) : {}"
     data-slot="root"
-    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
+    :class="rootClass"
     :style="props.style"
   >
     <component

test/components/Avatar.spec.ts

@@ -20,8 +20,9 @@ describe('Avatar', () => {
     ['with as', { props: { as: 'section' } }],
     ['with as (object)', { props: { src: 'https://github.com/bitrix24.png', as: { root: 'section', img: 'p' } } }],
     ['with as (partial object)', { props: { src: 'https://github.com/bitrix24.png', as: { img: 'p' } } }],
-    ['with class', { props: { class: 'bg-white' } }],
+    ['with class', { props: { class: 'bg-default' } }],
     ['with b24ui', { props: { b24ui: { fallback: 'font-bold' } } }],
+    ['with custom size', { props: { class: 'size-100', src: 'https://github.com/bitrix24.png' } }],
     // Slots
     ['with default slot', { slots: { default: '🚀' } }]
   ])

test/components/__snapshots__/Alert-vue.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]">
     <div data-slot="title" class="font-(--ui-font-weight-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Alert</div>
     <!--v-if-->

test/components/__snapshots__/Alert.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`Alert > renders with as correctly 1`] = `
 `;
 
 exports[`Alert > renders with avatar correctly 1`] = `
-"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
+"<div data-orientation="vertical" data-slot="root" class="relative overflow-hidden w-full flex text-(--b24ui-color) bg-(--b24ui-background) border-(--b24ui-border-color) border-(length:--b24ui-border-width) rounded-(--ui-border-radius-md) style-outline py-md ps-md pe-xs gap-2.5 items-start"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset) shrink-0"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>
   <div data-slot="wrapper" class="min-w-0 flex-1 flex flex-col font-[family-name:var(--ui-font-family-primary)]">
     <div data-slot="title" class="font-(--ui-font-weight-bold) text-(length:--ui-font-size-md)/(--ui-font-line-height-reset)">Alert</div>
     <!--v-if-->

test/components/__snapshots__/Avatar-vue.spec.ts.snap

@@ -4,11 +4,11 @@ exports[`Avatar > renders with alt correctly 1`] = `"<span data-slot="root" clas
 
 exports[`Avatar > renders with as (object) correctly 1`] = `
 "<section data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)">
-  <p src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p>
+  <p src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p>
 </section>"
 `;
 
-exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><p src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
+exports[`Avatar > renders with as (partial object) correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><p src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></p></span>"`;
 
 exports[`Avatar > renders with as correctly 1`] = `"<section data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><span data-slot="fallback" class="font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate">&nbsp;</span></section>"`;
 
@@ -19,30 +19,32 @@ exports[`Avatar > renders with chip correctly 1`] = `
 <!----></span></span>"
 `;
 
-exports[`Avatar > renders with class correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) bg-white"><span data-slot="fallback" class="font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate">&nbsp;</span></span>"`;
+exports[`Avatar > renders with class correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) bg-default"><span data-slot="fallback" class="font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate">&nbsp;</span></span>"`;
+
+exports[`Avatar > renders with custom size correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) size-100"><img src="https://github.com/bitrix24.png" width="400" height="400" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
 exports[`Avatar > renders with default slot correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)">🚀</span>"`;
 
 exports[`Avatar > renders with icon correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon" class="text-(--ui-color-design-plain-content-icon-secondary) shrink-0 size-[28px]"><path fill="currentColor" fill-rule="evenodd" d="M14.05 15.886a6.37 6.37 0 1 1 1.836-1.837l3.311 3.311a1 1 0 0 1 0 1.414l-.422.423a1 1 0 0 1-1.414 0zm1.058-5.328a4.55 4.55 0 1 1-9.098 0 4.55 4.55 0 0 1 9.099 0" clip-rule="evenodd"></path></svg></span>"`;
 
-exports[`Avatar > renders with size 2xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="60" height="60" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[60px] text-(length:--ui-font-size-5xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 2xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" width="14" height="14" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 2xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[20px] text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="94" height="94" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[94px] text-[34px]/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size 3xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[10px] text-4xs font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" width="10" height="10" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size 3xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[10px] text-4xs font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size lg correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="42" height="42" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size lg correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[42px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size md correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size md correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size sm correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="22" height="22" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size sm correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[28px] text-(length:--ui-font-size-xs)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="48" height="48" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xl correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring-(--ui-color-base-7) ring-2 size-[48px] text-(length:--ui-font-size-2xl)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with size xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" width="18" height="18" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with size xs correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[24px] text-(length:--ui-font-size-3xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
-exports[`Avatar > renders with src correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" width="32" height="32" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
+exports[`Avatar > renders with src correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><img src="https://github.com/bitrix24.png" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span>"`;
 
 exports[`Avatar > renders with text correctly 1`] = `"<span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle bg-(--ui-color-base-8) ring ring-(--ui-color-base-7) size-[32px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset)"><span data-slot="fallback" class="font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary) truncate">+1</span></span>"`;