[Imporvement] Icon: 升级为自定义组件 (#158)

* upgrade icon to custom component

* add empty line

example/pages/icon/index.json

@@ -1,3 +1,5 @@
 {
-  "navigationBarTitleText": "Icon 图标"
+  "usingComponents": {
+    "zan-icon": "../../dist/icon/index"
+  }
 }

example/pages/icon/index.wxml

@@ -4,7 +4,9 @@
 
   <view class="zan-panel">
     <view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
-      <view class="zan-icon zan-icon-{{ icon }}"  style="color: #ff4343;"></view>
+      <view class="example-icon">
+        <zan-icon type="{{ icon }}"></zan-icon>
+      </view>
       <view class="icon-classname">zan-icon-{{ icon }}</view>
     </view>
   </view>

example/pages/icon/index.wxss

@@ -4,11 +4,14 @@
   float: left;
   text-align: center;
 }
+
+.example-icon {
+  font-size: 24px;
+  padding: 10px;
+  color: rgba(69, 90, 100, .8);
+}
+
 .icon-classname {
   color: #999;
   font-size: 10px;
 }
-.zan-icon {
-  font-size: 24px;
-  margin: 20px;
-}

packages/icon/README.md

@@ -1,15 +1,18 @@
 ## Icon 图标
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+{
-```
+  "usingComponents": {
+    "zan-icon": "path/to/zanui-weapp/dist/icon/index"
+  }
+}
 
 ### 代码演示
-可以在任意元素上增加 zan-icon 类即可
+可以在任意位置上使用 zan-icon 标签。通过 type 可以控制 icon 显示的图标
 ```html
-<view class="zan-icon zan-icon-close"></view>
+<zan-icon type="success"></zan-icon>
 ```
 
 支持的 icon 和 名称 见下图

packages/icon/index.js

@@ -0,0 +1,9 @@
+Component({
+  externalClasses: ['class'],
+  properties: {
+    type: {
+      type: String,
+      value: ''
+    }
+  }
+});

packages/icon/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/icon/index.wxml

@@ -0,0 +1 @@
+<view class="zan-icon zan-icon-{{ type }}"></view>