diff --git a/packages/vant/src/icon/Icon.tsx b/packages/vant/src/icon/Icon.tsx index 9d05ea6c6..b5a04089e 100644 --- a/packages/vant/src/icon/Icon.tsx +++ b/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>, classPrefix: String, }; @@ -44,7 +51,6 @@ export default defineComponent({ {slots.default?.()} {isImageIcon && } diff --git a/packages/vant/src/icon/README.md b/packages/vant/src/icon/README.md index 250d71ef8..2c4571264 100644 --- a/packages/vant/src/icon/README.md +++ b/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 diff --git a/packages/vant/src/icon/README.zh-CN.md b/packages/vant/src/icon/README.zh-CN.md index 2dbe87980..5d4ae2822 100644 --- a/packages/vant/src/icon/README.zh-CN.md +++ b/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` | diff --git a/packages/vant/src/icon/test/__snapshots__/index.spec.js.snap b/packages/vant/src/icon/test/__snapshots__/index.spec.ts.snap similarity index 100% rename from packages/vant/src/icon/test/__snapshots__/index.spec.js.snap rename to packages/vant/src/icon/test/__snapshots__/index.spec.ts.snap diff --git a/packages/vant/src/icon/test/index.spec.js b/packages/vant/src/icon/test/index.spec.ts similarity index 85% rename from packages/vant/src/icon/test/index.spec.js rename to packages/vant/src/icon/test/index.spec.ts index 26fcaf009..6d272131c 100644 --- a/packages/vant/src/icon/test/index.spec.js +++ b/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'); +});