feat(GoodsAcitonIcon): add color prop (#5576)

src/goods-action-icon/index.js

@@ -12,6 +12,7 @@ export default createComponent({
     ...routeProps,
     text: String,
     icon: String,
+    color: String,
     info: [Number, String],
     iconClass: null
   },
@@ -20,22 +21,31 @@ export default createComponent({
     onClick(event) {
       this.$emit('click', event);
       route(this.$router, this);
+    },
+
+    genIcon() {
+      const slot = this.slots('icon');
+
+      if (slot) {
+        return <div class={bem('icon')}>{slot}</div>;
+      }
+
+      return (
+        <Icon
+          class={[bem('icon'), this.iconClass]}
+          tag="div"
+          info={this.info}
+          name={this.icon}
+          color={this.color}
+        />
+      );
     }
   },
 
   render() {
     return (
       <div role="button" tabindex="0" class={bem()} onClick={this.onClick}>
-        {this.slots('icon') ? (
+        {this.genIcon()}
-          <div class={bem('icon')}>{this.slots('icon')}</div>
-        ) : (
-          <Icon
-            class={[bem('icon'), this.iconClass]}
-            tag="div"
-            info={this.info}
-            name={this.icon}
-          />
-        )}
         {this.slots() || this.text}
       </div>
     );

src/goods-action/README.md

@@ -56,6 +56,18 @@ Use `info` prop to show badge in icon
 </van-goods-action>
 ```
 
+### Custom Icon Color
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="Icon1" color="#07c160" />
+  <van-goods-action-icon icon="cart-o" text="Icon2" />
+  <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
+  <van-goods-action-button type="warning" text="Button1" />
+  <van-goods-action-button type="danger" text="Button2" />
+</van-goods-action>
+```
+
 ### Custom Button Color
 
 ```html
@@ -81,6 +93,7 @@ Use `info` prop to show badge in icon
 |------|------|------|------|
 | text | Button text | *string* | - |
 | icon | Icon | *string* | - |
+| color `v2.4.2` | Icon color | *string* | `#323233` |
 | icon-class | Icon class name | *any* | `''` |
 | info | Content of the badge | *string \| number* | - |
 | url | Link | *string* | - |

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

@@ -56,9 +56,23 @@ export default {
 </van-goods-action>
 ```
 
+### 自定义图标颜色
+
+通过 GoodsActionIcon 的`color`属性可以自定义图标的颜色
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
+  <van-goods-action-icon icon="cart-o" text="购物车" />
+  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
+  <van-goods-action-button type="warning" text="加入购物车" />
+  <van-goods-action-button type="danger" text="立即购买" />
+</van-goods-action>
+```
+
 ### 自定义按钮颜色
 
-通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
+通过 GoodsActionButton 的`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
 
 ```html
 <van-goods-action>
@@ -83,6 +97,7 @@ export default {
 |------|------|------|------|
 | text | 按钮文字 | *string* | - |
 | icon | 图标 | *string* | - |
+| color `v2.4.2` | 图标颜色 | *string* | `#323233` |
 | icon-class | 图标额外类名 | *any* | - |
 | info | 图标右上角徽标的内容 | *string \| number* | - |
 | url | 点击后跳转的链接地址 | *string* | - |

src/goods-action/demo/index.vue

@@ -10,7 +10,7 @@
       </van-goods-action>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('iconInfo')">
       <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
         <van-goods-action-icon icon="cart-o" info="5" :text="$t('icon2')" />
@@ -20,6 +20,16 @@
       </van-goods-action>
     </demo-block>
 
+    <demo-block v-if="!isWeapp" :title="$t('customIconColor')">
+      <van-goods-action>
+        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
+        <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
+        <van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
+        <van-goods-action-button type="warning" :text="$t('button1')" />
+        <van-goods-action-button type="danger" :text="$t('button2')" />
+      </van-goods-action>
+    </demo-block>
+
     <demo-block :title="$t('customButtonColor')">
       <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
@@ -35,25 +45,29 @@
 export default {
   i18n: {
     'zh-CN': {
-      clickIcon: '点击图标',
-      clickButton: '点击按钮',
       icon1: '客服',
       icon2: '购物车',
       icon3: '店铺',
       button1: '加入购物车',
       button2: '立即购买',
-      title2: '徽标提示',
+      iconInfo: '徽标提示',
+      collected: '已收藏',
+      clickIcon: '点击图标',
+      clickButton: '点击按钮',
+      customIconColor: '自定义图标颜色',
       customButtonColor: '自定义按钮颜色'
     },
     'en-US': {
-      clickIcon: 'Click Icon',
-      clickButton: 'Click Button',
       icon1: 'Icon1',
       icon2: 'Icon2',
       icon3: 'Icon3',
       button1: 'Button1',
       button2: 'Button2',
-      title2: 'Icon info',
+      iconInfo: 'Icon info',
+      collected: 'Collected',
+      clickIcon: 'Click Icon',
+      clickButton: 'Click Button',
+      customIconColor: 'Custom Icon Color',
       customButtonColor: 'Custom Button Color'
     }
   },

src/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -35,6 +35,25 @@ exports[`renders demo correctly 1`] = `
       </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
+  <div>
+    <div class="van-goods-action">
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon" style="color: rgb(7, 193, 96);">
+          <!---->
+        </div>客服
+      </div>
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
+          <!---->
+        </div>购物车
+      </div>
+      <div role="button" tabindex="0" class="van-goods-action-icon">
+        <div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
+          <!---->
+        </div>已收藏
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger"><span class="van-button__text">立即购买</span></button>
+    </div>
+  </div>
   <div>
     <div class="van-goods-action">
       <div role="button" tabindex="0" class="van-goods-action-icon">