[new feature] Rate: add icon、void-icon prop (#2148)

packages/rate/demo/index.vue

@@ -4,9 +4,17 @@
       <van-rate v-model="value1" />
     </demo-block>
 
-    <demo-block :title="$t('customColor')">
+    <demo-block :title="$t('customIcon')">
       <van-rate
         v-model="value2"
+        icon="like"
+        void-icon="like-o"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customStyle')">
+      <van-rate
+        v-model="value3"
         :size="25"
         :count="6"
         color="#2ba"
@@ -16,7 +24,7 @@
 
     <demo-block :title="$t('disabled')">
       <van-rate
-        v-model="value3"
+        v-model="value4"
         disabled
       />
     </demo-block>
@@ -28,19 +36,22 @@ export default {
   i18n: {
     'zh-CN': {
       disabled: '禁用状态',
-      customColor: '自定义颜色'
+      customIcon: '自定义图标',
+      customStyle: '自定义样式'
     },
     'en-US': {
       disabled: 'Disabled',
-      customColor: 'Custom Color'
+      customIcon: 'Custom Icon',
+      customStyle: 'Custom Style'
     }
   },
 
   data() {
     return {
       value1: 3,
-      value2: 4,
-      value3: 2
+      value2: 3,
+      value3: 4,
+      value4: 2
     };
   }
 };

packages/rate/en-US.md

@@ -25,7 +25,17 @@ export default {
 }
 ```
 
-#### Custom Color
+#### Custom Icon
+
+```html
+<van-rate
+  v-model="value"
+  icon="like"
+  void-icon="like-o"
+/>
+```
+
+#### Custom Style
 
 ```html
 <van-rate
@@ -50,8 +60,10 @@ export default {
 | v-model | Current rate | `Number` | - |
 | count | Count | `Number` | `5` |
 | size | Icon size (px) | `Number` | `20` |
-| color | Selected color | `String` | `#ffd21e`  |
+| color | Selected color | `String` | `#ffd21e` |
 | void-color | Void color | `String` | `#c7c7c7` |
+| icon | Selected icon | `String` | `star` |
+| void-icon | Void icon | `String` | `star-o` |
 | readonly | Whether to be readonly | `Boolean` | `false` |
 | disabled | Whether to disable rate | `Boolean` | `false` |
 | disabled-color | Disabled color | `String` | `#bdbdbd` | 

packages/rate/index.vue

@@ -9,7 +9,7 @@
       :class="b('item')"
       :size="size + 'px'"
       :data-index="index"
-      :name="full ? 'star' : 'star-o'"
+      :name="full ? icon : voidIcon"
       :color="disabled ? disabledColor : full ? color : voidColor"
       @click="onSelect(index)"
     />
@@ -29,6 +29,14 @@ export default create({
       type: Number,
       default: 20
     },
+    icon: {
+      type: String,
+      default: 'star'
+    },
+    voidIcon: {
+      type: String,
+      default: 'star-o'
+    },
     color: {
       type: String,
       default: '#ffd21e'

packages/rate/test/__snapshots__/demo.spec.js.snap

@@ -21,6 +21,25 @@ exports[`renders demo correctly 1`] = `
       </i>
     </div>
   </div>
+  <div>
+    <div class="van-rate">
+      <i data-index="0" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="1" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="2" class="van-icon van-icon-like van-rate__item" style="color:#ffd21e;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="3" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+      </i>
+      <i data-index="4" class="van-icon van-icon-like-o van-rate__item" style="color:#c7c7c7;font-size:20px;">
+        <!---->
+      </i>
+    </div>
+  </div>
   <div>
     <div class="van-rate">
       <i data-index="0" class="van-icon van-icon-star van-rate__item" style="color:#2ba;font-size:25px;">

packages/rate/zh-CN.md

@@ -25,7 +25,17 @@ export default {
 }
 ```
 
-#### 自定义颜色
+#### 自定义图标
+
+```html
+<van-rate
+  v-model="value"
+  icon="like"
+  void-icon="like-o"
+/>
+```
+
+#### 自定义样式
 
 ```html
 <van-rate
@@ -50,8 +60,10 @@ export default {
 | v-model | 当前分值 | `Number` | - | - |
 | count | 图标总数 | `Number` | `5` | - |
 | size | 图标大小 (px) | `Number` | `20` | - |
-| color | 选中时的颜色 | `String` | `#ffd21e`  | - |
+| color | 选中时的颜色 | `String` | `#ffd21e` | - |
 | void-color | 未选中时的颜色 | `String` | `#c7c7c7` | - |
+| icon | 选中时的图标，可选值见 Icon 组件 | `String` | `star` | 1.4.7 |
+| void-icon | 未选中时的图标，可选值见 Icon 组件 | `String` | `star-o`  | 1.4.7 |
 | readonly | 是否为只读状态 | `Boolean` | `false` | 1.3.0 |
 | disabled | 是否禁用评分 | `Boolean` | `false` | - |
 | disabled-color | 禁用时的颜色 | `String` | `#bdbdbd` | - |