feat(Cell): add icon-prefix prop (#5666)

src/cell/README.md

@@ -132,6 +132,7 @@ Vue.use(CellGroup);
 | title-class | Title className | *any* | - |
 | value-class | Value className | *any* | - |
 | label-class | Label className | *any* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 
 ### Cell Events
 

src/cell/README.zh-CN.md

@@ -143,6 +143,7 @@ Vue.use(CellGroup);
 | title-class | 左侧标题额外类名 | *any* | - |
 | value-class | 右侧内容额外类名 | *any* | - |
 | label-class | 描述信息额外类名 | *any* | - |
+| icon-prefix `v2.5.3` | 图标类名前缀 | *string* | `van-icon` |
 
 ### Cell Events
 

src/cell/index.tsx

@@ -78,7 +78,13 @@ function Cell(
     }
 
     if (icon) {
-      return <Icon class={bem('left-icon')} name={icon} />;
+      return (
+        <Icon
+          class={bem('left-icon')}
+          name={icon}
+          classPrefix={props.iconPrefix}
+        />
+      );
     }
   }
 

src/cell/shared.ts

@@ -6,6 +6,7 @@ export type SharedCellProps = {
   isLink?: boolean;
   required?: boolean;
   clickable?: boolean;
+  iconPrefix?: string;
   titleStyle?: any;
   titleClass?: any;
   valueClass?: any;
@@ -23,6 +24,7 @@ export const cellProps = {
   isLink: Boolean,
   required: Boolean,
   clickable: Boolean,
+  iconPrefix: String,
   titleStyle: null as any,
   titleClass: null as any,
   valueClass: null as any,

src/cell/test/__snapshots__/index.spec.js.snap

@@ -12,6 +12,11 @@ exports[`arrow direction 1`] = `
     <!----></i></div>
 `;
 
+exports[`icon-prefix prop 1`] = `
+<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
+    <!----></i></div>
+`;
+
 exports[`render slot 1`] = `
 <div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
   </div>Custom Extra</div>

src/cell/test/index.spec.js

@@ -67,3 +67,14 @@ test('CellGroup title slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('icon-prefix prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      iconPrefix: 'my-icon',
+      icon: 'success',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});