fix(avatar): color prop not working, inner icon has wrong size

CHANGELOG.en-US.md

@@ -4,8 +4,6 @@
 
 ### Breaking Changes
 
-- `n-avatar`'s `color` prop will not be recommended, please use `style` prop.
-
 ### Fixes
 
 - Fix `n-alert`'s `header` slot unable to display normally.
@@ -13,6 +11,8 @@
 - Fix `n-tag` line-height is too low that clamps the content.
 - Fix `n-select` displays with mistake in input if `filterable` is `true`, closes [#1823](https://github.com/TuSimple/naive-ui/issues/1823).
 - Fix `n-page-header`'s content has margin-top when header is not displayed, closes [#1795](https://github.com/TuSimple/naive-ui/issues/1795).
+- Fix `n-avatar` `color` prop not working.
+- Fix `n-avatar`'s inner icon has wrong size.
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -4,8 +4,6 @@
 
 ### Breaking Changes
 
-- `n-avatar` 的 `color` 属性不再推荐，请使用 `style` 属性
-
 ### Fixes
 
 - 修复 `n-alert` 的 `header` slot 无法正常显示
@@ -13,6 +11,8 @@
 - 修复 `n-tag` 行高过低导致内容截断
 - 修复 `n-select` 设定 `filterable` 后选项过长显示出错，关闭 [#1823](https://github.com/TuSimple/naive-ui/issues/1823)
 - 修复 `n-page-header` 在不显示头部时内容有 margin-top，关闭 [#1795](https://github.com/TuSimple/naive-ui/issues/1795)
+- 修复 `n-avatar` `color` 属性不生效
+- 修复 `n-avatar` 内部图标尺寸不正确
 
 ### Feats
 

src/avatar/demos/enUS/index.demo-entry.md

@@ -22,11 +22,11 @@ v-show-debug
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
+| color | `string` | `undefined` | The background color of the avatar. |
 | fallback-src | `string` | `undefined` | Image URL to show when avatar fails to load. |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | Object-fit type of the image in the container. |
 | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Avatar's size. |
 | src | `string` | `undefined` | Avatar's image source. |
-| style | `string \| Object` | `undefined` | Avatar's style. |
 | round | `boolean` | `false` | Whether to display a rounded avatar. |
 | on-error | `(e: Event) => void` | `undefined` | Callback executed when the avatar image fails to load. |
 

src/avatar/demos/zhCN/index.demo-entry.md

@@ -22,11 +22,11 @@ v-show-debug
 
 | 名称 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
+| color | `string` | `undefined` | 头像的背景色 |
 | fallback-src | `string` | `undefined` | 头像加载失败时显示的图片的地址 |
 | object-fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'fill'` | 头像的图片在容器内的的适应类型 |
 | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 头像的尺寸 |
 | src | `string` | `undefined` | 头像的地址 |
-| style | `string \| Object` | `undefined` | 头像的样式 |
 | round | `boolean` | `false` | 头像是否圆形 |
 | on-error | `(e: Event) => void` | `undefined` | 头像的图片加载失败执行的回调 |
 

src/avatar/src/Avatar.tsx

@@ -104,7 +104,7 @@ export default defineComponent({
       mergedClsPrefix: mergedClsPrefixRef,
       fitTextTransform,
       cssVars: computed(() => {
-        const { size } = props
+        const { size, color: propColor } = props
         const {
           self: { borderRadius, fontSize, color },
           common: { cubicBezierEaseInOut }
@@ -118,7 +118,7 @@ export default defineComponent({
         return {
           '--font-size': fontSize,
           '--border-radius': mergedRoundRef.value ? '50%' : borderRadius,
-          '--color': color,
+          '--color': propColor || color,
           '--bezier': cubicBezierEaseInOut,
           '--merged-size': `var(--avatar-size-override, ${height})`
         }
@@ -137,11 +137,7 @@ export default defineComponent({
         <VResizeObserver onResize={this.fitTextTransform}>
           {{
             default: () => (
-              <span
-                ref="textRef"
-                class={`${mergedClsPrefix}-avatar__text`}
-                style={{ background: this.color }}
-              >
+              <span ref="textRef" class={`${mergedClsPrefix}-avatar__text`}>
                 {$slots}
               </span>
             )

src/avatar/src/styles/index.cssr.ts

@@ -5,7 +5,7 @@ import { c, cE, cB } from '../../../_utils/cssr'
 // --border-radius
 // --color
 // --bezier
-// --size
+// --merged-size
 export default cB('avatar', `
   width: var(--merged-size);
   height: var(--merged-size);
@@ -34,9 +34,7 @@ export default cB('avatar', `
   `),
   cB('icon', `
     vertical-align: bottom;
-    font-size: var(--size);
+    font-size: calc(var(--merged-size) - 6px);
   `),
-  cE('text', {
-    lineHeight: 1.25
-  })
+  cE('text', 'line-height: 1.25')
 ])