feat(ActionBarIcon): add icon-prefix prop (#8748)

src/action-bar-icon/ActionBarIcon.tsx

@@ -22,6 +22,7 @@ export default defineComponent({
     color: String,
     badge: [Number, String],
     iconClass: unknownProp,
+    iconPrefix: String,
   }),
 
   setup(props, { slots }) {
@@ -30,7 +31,7 @@ export default defineComponent({
     useParent(ACTION_BAR_KEY);
 
     const renderIcon = () => {
-      const { dot, badge, icon, color, iconClass } = props;
+      const { dot, badge, icon, color, iconClass, iconPrefix } = props;
 
       if (slots.icon) {
         return (
@@ -48,6 +49,7 @@ export default defineComponent({
           badge={badge}
           color={color}
           class={[bem('icon'), iconClass]}
+          classPrefix={iconPrefix}
         />
       );
     };

src/action-bar-icon/test/__snapshots__/index.spec.ts.snap

@@ -51,3 +51,13 @@ exports[`should render icon slot with dot correctly 1`] = `
   Content
 </div>
 `;
+
+exports[`should render icon-prefix correctly 1`] = `
+<div role="button"
+     class="van-action-bar-icon"
+     tabindex="0"
+>
+  <div class="van-badge__wrapper my-icon my-icon-success van-action-bar-icon__icon">
+  </div>
+</div>
+`;

src/action-bar-icon/test/index.spec.ts

@@ -21,6 +21,17 @@ test('should render icon slot correctly', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
+test('should render icon-prefix correctly', () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      icon: 'success',
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 test('should render icon slot with badge correctly', () => {
   const wrapper = mount(ActionBarIcon, {
     props: {

src/action-bar/README.md

@@ -99,8 +99,9 @@ Use `badge` prop to show badge in icon.
 | icon | Icon | _string_ | - |
 | color | Icon color | _string_ | `#323233` |
 | icon-class | Icon class name | _string \| Array \| object_ | `''` |
-| dot `2.5.5` | Whether to show red dot | _boolean_ | - |
-| badge `2.5.6` | Content of the badge | _number \| string_ | - |
+| icon-prefix `v3.0.17` | Icon className prefix | _string_ | `van-icon` |
+| dot | Whether to show red dot | _boolean_ | - |
+| badge | Content of the badge | _number \| string_ | - |
 | url | Link | _string_ | - |
 | to | Target route of the link, same as to of vue-router | _string \| object_ | - |
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |

src/action-bar/README.zh-CN.md

@@ -103,7 +103,8 @@ export default {
 | icon | 图标 | _string_ | - |
 | color | 图标颜色 | _string_ | `#323233` |
 | icon-class | 图标额外类名 | _string \| Array \| object_ | - |
-| dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
+| icon-prefix `v3.0.17` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge | 图标右上角徽标的内容 | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

src/submit-bar/README.md

@@ -101,7 +101,7 @@ export default {
 | button-type | Button type | _string_ | `danger` |
 | button-color | Button color | _string_ | - |
 | tip | Tip | _string_ | - |
-| tip-icon | Icon | _string_ | - |
+| tip-icon | Tip left icon | _string_ | - |
 | currency | Currency symbol | _string_ | `¥` |
 | disabled | Whether to disable button | _boolean_ | `false` |
 | loading | Whether to show loading icon | _boolean_ | `false` |