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

src/button/README.md

@@ -106,6 +106,7 @@ Vue.use(Button);
 | text | Text | *string* | - |
 | color `v2.1.8` | Color, support linear-gradient | *string* | - |
 | icon | Left Icon | *string* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 | tag | HTML Tag | *string* | `button` |
 | native-type | Native Type Attribute | *string* | `''` |
 | plain | Whether to be plain button | *boolean* | `false` |

src/button/README.zh-CN.md

@@ -128,8 +128,9 @@ Vue.use(Button);
 | text | 按钮文字 | *string* | - |
 | color `v2.1.8` | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
 | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
-| tag | HTML 标签 | *string* | `button` |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
-| native-type | 原生 button 标签 type 属性 | *string* | - |
+| tag | 根节点的 HTML 标签 | *string* | `button` |
+| native-type | 原生 button 标签的 type 属性 | *string* | - |
 | block | 是否为块级元素 | *boolean* | `false` |
 | plain | 是否为朴素按钮 | *boolean* | `false` |
 | square | 是否为方形按钮 | *boolean* | `false` |

src/button/index.tsx

@@ -31,6 +31,7 @@ export type ButtonProps = RouteProps & {
   hairline?: boolean;
   disabled?: boolean;
   nativeType?: string;
+  iconPrefix?: string;
   loadingSize: string;
   loadingType?: LoadingType;
   loadingText?: string;
@@ -119,7 +120,9 @@ function Button(
         />
       );
     } else if (icon) {
-      content.push(<Icon name={icon} class={bem('icon')} />);
+      content.push(
+        <Icon name={icon} class={bem('icon')} classPrefix={props.iconPrefix} />
+      );
     }
 
     let text;

src/cell/README.md

@@ -114,11 +114,12 @@ Vue.use(CellGroup);
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
-| icon | Left Icon | *string* | - |
 | title | Title | *number \| string* | - |
 | value | Right text | *number \| string* | - |
 | label | Description below the title | *string* | - |
 | size | Size，can be set to `large` | *string* | - |
+| icon | Left Icon | *string* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 | border | Whether to show inner border | *boolean* | `true` |
 | center | Whether to center content vertically | *boolean* | `true` |
 | url | Link URL | *string* | - |
@@ -132,7 +133,6 @@ 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

@@ -125,11 +125,12 @@ Vue.use(CellGroup);
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|
-| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
 | title | 左侧标题 | *number \| string* | - |
 | value | 右侧内容 | *number \| string* | - |
 | label | 标题下方的描述信息 | *string* | - |
 | size | 单元格大小，可选值为 `large` | *string* | - |
+| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
 | url | 点击后跳转的链接地址 | *string* | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
 | border | 是否显示内边框 | *boolean* | `true` |
@@ -143,7 +144,6 @@ Vue.use(CellGroup);
 | title-class | 左侧标题额外类名 | *any* | - |
 | value-class | 右侧内容额外类名 | *any* | - |
 | label-class | 描述信息额外类名 | *any* | - |
-| icon-prefix `v2.5.3` | 图标类名前缀 | *string* | `van-icon` |
 
 ### Cell Events
 

src/grid/README.md

@@ -116,12 +116,12 @@ Vue.use(GridItem);
 |------|------|------|------|
 | text | Text | *string* | - |
 | icon | Icon name or URL | *string* | - |
+| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 | dot `v2.2.1` | Whether to show red dot | *boolean* | `false` |
 | info `v2.2.1` | Content of the badge | *number \| string* | - |
 | url | Link URL | *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` |
-| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
 
 ### GridItem Events
 

src/grid/README.zh-CN.md

@@ -134,12 +134,12 @@ Vue.use(GridItem);
 |------|------|------|------|
 | text | 文字 | *string* | - |
 | icon | [图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
+| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | *boolean* | `false` |
 | info `v2.2.1` | 图标右上角徽标的内容 | *number \| string* | - |
 | url | 点击后跳转的链接地址 | *string* | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |
 | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` |
-| icon-prefix `v2.5.3` | 图标类名前缀 | *string* | `van-icon` |
 
 ### GridItem Events
 

src/icon/README.zh-CN.md

@@ -96,7 +96,7 @@ import 'vant/lib/icon/local.css';
 | info | 图标右上角徽标的内容 | *number \| string* | - |
 | color | 图标颜色 | *string* | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *number \| string* | `inherit` |
-| class-prefix | 类名前缀 | *string* | `van-icon` |
+| class-prefix | 类名前缀，用于使用自定义图标 | *string* | `van-icon` |
 | tag | HTML 标签 | *string* | `i` |
 
 ### Events

src/toast/README.zh-CN.md

@@ -145,7 +145,7 @@ Toast.resetDefaultOptions('loading');
 | position | 位置，可选值为 `top` `bottom` | *string* | `middle` |
 | message | 文本内容，支持通过`\n`换行 | *string* | `''` | - |
 | icon `v2.0.1` | 自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
-| iconPrefix `v2.0.9` | 图标类名前缀 | *string* | `van-icon` |
+| iconPrefix `v2.0.9` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
 | overlay `v2.2.13` | 是否显示背景遮罩层 | *boolean* | `false` |
 | forbidClick | 是否禁止背景点击 | *boolean* | `false` |
 | closeOnClick `v2.1.5` | 是否在点击后关闭 | *boolean* | `false` |