feat(Badge): add badge-props prop (#10095)

packages/vant/src/icon/Icon.tsx

@@ -1,11 +1,17 @@
-import { inject, computed, defineComponent, type ExtractPropTypes } from 'vue';
+import {
+  inject,
+  computed,
+  defineComponent,
+  type PropType,
+  type ExtractPropTypes,
+} from 'vue';
 import {
   addUnit,
   numericProp,
   makeStringProp,
   createNamespace,
 } from '../utils';
-import { Badge } from '../badge';
+import { Badge, type BadgeProps } from '../badge';
 import { CONFIG_PROVIDER_KEY } from '../config-provider/ConfigProvider';
 
 const [name, bem] = createNamespace('icon');
@@ -19,6 +25,7 @@ const iconProps = {
   size: numericProp,
   badge: numericProp,
   color: String,
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
   classPrefix: String,
 };
 
@@ -44,7 +51,6 @@ export default defineComponent({
         <Badge
           dot={dot}
           tag={tag}
-          content={badge}
           class={[
             classPrefix.value,
             isImageIcon ? '' : `${classPrefix.value}-${name}`,
@@ -53,6 +59,8 @@ export default defineComponent({
             color,
             fontSize: addUnit(size),
           }}
+          content={badge}
+          {...props.badgeProps}
         >
           {slots.default?.()}
           {isImageIcon && <img class={bem('image')} src={name} />}

packages/vant/src/icon/README.md

@@ -91,15 +91,16 @@ Use `size` prop to set icon size.
 
 ### Props
 
-| Attribute    | Description              | Type               | Default    |
-| ------------ | ------------------------ | ------------------ | ---------- |
-| name         | Icon name or URL         | _string_           | `''`       |
-| dot          | Whether to show red dot  | _boolean_          | `false`    |
-| badge        | Content of the badge     | _number \| string_ | `''`       |
-| color        | Icon color               | _string_           | `inherit`  |
-| size         | Icon size                | _number \| string_ | `inherit`  |
-| class-prefix | ClassName prefix         | _string_           | `van-icon` |
-| tag          | HTML Tag of root element | _string_           | `i`        |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| name | Icon name or URL | _string_ | `''` |
+| dot | Whether to show red dot | _boolean_ | `false` |
+| badge | Content of the badge | _number \| string_ | `''` |
+| badge-props `v3.2.8` | Props of Badge，see [Badge - props](#/en-US/badge#props) | _BadgeProps_ | - |
+| color | Icon color | _string_ | `inherit` |
+| size | Icon size | _number \| string_ | `inherit` |
+| class-prefix | ClassName prefix | _string_ | `van-icon` |
+| tag | HTML Tag of root element | _string_ | `i` |
 
 ### Events
 

packages/vant/src/icon/README.zh-CN.md

@@ -98,6 +98,7 @@ app.use(Icon);
 | name | 图标名称或图片链接 | _string_ | - |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
+| badge-props `v3.2.8` | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](#/zh-CN/badge#props) | _BadgeProps_ | - |
 | color | 图标颜色 | _string_ | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为 `px` | _number \| string_ | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |

packages/vant/src/icon/test/index.spec.ts

@@ -75,3 +75,17 @@ test('should change icon size when using size prop', () => {
   });
   expect(wrapper.style.fontSize).toEqual('20px');
 });
+
+test('should render badge-props prop correctly', async () => {
+  const wrapper = mount(Icon, {
+    props: {
+      badge: 1,
+      badgeProps: {
+        color: 'blue',
+      },
+    },
+  });
+
+  const badge = wrapper.find('.van-badge');
+  expect(badge.style.backgroundColor).toEqual('blue');
+});