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: {