[breaking change]: Icon: rewrite

example/pages/icon/index.json

@@ -2,7 +2,7 @@
   "navigationBarTitleText": "Icon 图标",
   "usingComponents": {
     "demo-block": "../../components/demo-block/index",
-    "van-col": "../../dist/icon/index",
+    "van-col": "../../dist/col/index",
     "van-icon": "../../dist/icon/index"
   }
 }

example/pages/icon/index.wxml

@@ -1,6 +1,6 @@
 <demo-block title="图标列表">
-  <van-col span="8" wx:for="{{ icons }}" wx:key="index">
-    <van-icon name="{{ item }}" />
-    <view>{{ item }}</view>
+  <van-col custom-class="col" span="8" wx:for="{{ icons }}" wx:for-item="icon" wx:key="index">
+    <van-icon custom-class="icon" name="{{ icon }}" size="32px" />
+    <view class="text">{{ icon }}</view>
   </van-col>
 </demo-block>

example/pages/icon/index.wxss

@@ -1,17 +1,17 @@
-.icon-wrap {
-  width: 33.33333%;
-  height: 100px;
-  float: left;
+.col {
   text-align: center;
+  height: 100px;
+  float: none;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.example-icon {
-  font-size: 24px;
-  padding: 10px;
+.icon {
+  display: block;
+  margin: 15px 0;
   color: rgba(69, 90, 100, .8);
 }
 
-.icon-classname {
-  color: #999;
-  font-size: 10px;
+.text {
+  font-size: 14px;
 }

packages/icon/README.md

@@ -25,7 +25,8 @@
 |-----------|-----------|-----------|-------------|
 | name | 图标名称 | `String` | - |
 | info | 图标右上角文字提示 | `String | Number` | - |
-| color | 图标颜色 | `String` | - |
+| color | 图标颜色 | `String` | `inherit` |
+| size | 图标大小 | `String` | `inherit` |
 
 ### Event
 

packages/icon/index.js

@@ -4,6 +4,7 @@ Component({
   properties: {
     info: null,
     name: String,
+    size: String,
     color: String
   }
 });

packages/icon/index.wxml

@@ -1,3 +1,6 @@
-<view class="custom-class van-icon van-icon-{{ name }}" style="color: {{ color }}">
+<view
+  class="custom-class van-icon van-icon-{{ name }}"
+  style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
+>
   <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
 </view>