v2.0.3

1.修复一些单位错误（带输入框的操作条）
2.纠正一些单词拼写...
3.抛弃icon标签，改回text标签的写法
4.抛弃px单位的样式文件
5.优化一些组件的字体大小
6.新增两种加载样式

demo/app.wxss

@@ -1,5 +1,5 @@
 @import "icon.wxss";
-@import "colorui-rpx.wxss";
+@import "colorui.wxss";
 @import "/pages/plugin/animation/animation.wxss";
 
 .nav-list {
@@ -89,7 +89,7 @@
   margin-right: 1px;
 }
 
-.nav-li icon {
+.nav-li text {
   position: absolute;
   right: 30rpx;
   top: 30rpx;

demo/colorui.wxss

@@ -1,6 +1,5 @@
 /*
-  Color UI v2.0.2 | by 文晓港 
-  单位为多种混合(rpx,vw,vh,em)
+  Color UI v2.0.3 | by 文晓港 
   仅供学习交流，如作它用所承受的法律责任一概与作者无关   
   （QQ交流群：240787041）
   文档：http://www.color-ui.com/
@@ -149,7 +148,7 @@ item, chat, image {
   border-bottom-left-radius: 6rpx;
 }
 
-.grid.grid-square view> icon, .grid.grid-square item> icon {
+.grid.grid-square view> text[class*="icon"], .grid.grid-square item> text {
   font-size: 52rpx;
   position: absolute;
   color: #aaa;
@@ -691,7 +690,7 @@ switch .wx-switch-input::after {
 
 switch .wx-switch-input-checked::after {
   margin: auto !important;
-  left: 54rpx !important;
+  left: 57rpx !important;
   box-shadow: none !important;
 }
 
@@ -1448,7 +1447,7 @@ button.shadow[class*="-black"] {
           按钮
  ==================== */
 
-.round, button.icon {
+.round, button.text {
   border-radius: 5000rpx !important;
 }
 
@@ -1523,7 +1522,7 @@ button.icon.sm {
   height: 56rpx;
 }
 
-button.icon {
+button.text {
   width: 70rpx;
   height: 70rpx;
   padding: 0;
@@ -1686,7 +1685,7 @@ avatar.sm {
   line-height: 48rpx;
 }
 
-avatar > icon {
+avatar > text {
   position: absolute;
   left: 50%;
   top: 0;
@@ -1696,15 +1695,15 @@ avatar > icon {
   transform: scale(1.2) translateX(-50%);
 }
 
-avatar.sm > icon {
+avatar.sm > text {
   transform: scale(0.75) translateX(-50%);
 }
 
-avatar.lg > icon {
+avatar.lg > text {
   transform: scale(1.75) translateX(-50%);
 }
 
-avatar.xl > icon {
+avatar.xl > text {
   transform: scale(2.2) translateX(-50%);
 }
 
@@ -1860,6 +1859,119 @@ load.load-icon.over {
   display: none;
 }
 
+load.load-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 140rpx;
+  left: 0;
+  margin: auto;
+  width: 260rpx;
+  height: 260rpx;
+  background: #fff;
+  border-radius: 10rpx;
+  box-shadow: 0 0 0rpx 2000rpx rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 28rpx;
+  z-index: 9999;
+  line-height: 2.4em;
+}
+
+load.load-modal [class*="icon"]{
+  font-size: 60rpx;
+}
+load.load-modal image{
+  width: 70rpx;
+  height: 70rpx;
+}
+
+load.load-modal::after {
+  content: "";
+  position: absolute;
+  background: #fff;
+  border-radius: 50%;
+  width: 200rpx;
+  height: 200rpx;
+  font-size: 10px;
+  border-top: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-right: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
+  border-left: 6rpx solid #f37b1d;
+  animation: icon-spin 1s infinite linear;
+  z-index: -1;
+}
+
+.load-progress {
+  pointer-events: none;
+  top: 0;
+  position: fixed;
+  width: 100%;
+  left: 0;  
+  z-index: 2000;
+}
+.load-progress.hide {
+  display: none;
+}
+
+.load-progress .load-progress-bar {
+  position: relative;
+  width: 100%;
+  height: 4rpx;
+  overflow: hidden;
+  transition: all 200ms ease 0s;
+}
+
+
+.load-progress .load-progress-spinner {
+  position: absolute;
+  top: 10rpx;
+  right: 10rpx;
+  z-index: 2000;
+  display: block;
+}
+
+.load-progress .load-progress-spinner::after {
+  content: "";
+  display: block;
+  width: 24rpx;
+  height: 24rpx;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: solid 4rpx transparent;
+  border-top-color: inherit;
+  border-left-color: inherit;
+  border-radius: 50%;
+  -webkit-animation: load-progress-spinner 0.4s linear infinite;
+  animation: load-progress-spinner 0.4s linear infinite;
+}
+
+@-webkit-keyframes load-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load-progress-spinner {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 /* ==================
           列表
  ==================== */
@@ -1888,8 +2000,6 @@ list+list {
 
 list.menu>item {
   position: relative;
-  line-height: 36rpx;
-  font-size: 32rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1923,27 +2033,31 @@ list.menu.no-padding>item.arrow {
 
 list.menu>item .content {
   line-height: 1.6em;
-  flex: 1;
+  flex: 1;  
+  font-size: 30rpx;
 }
 
 list.menu>item button.content {
   padding: 0;
   justify-content: flex-start;
-  font-size: 32rpx;
 }
 
 list.menu>item button.content::after {
   display: none;
 }
 
-list.menu>item .content>text[class*="icon"], list.menu>item .content>image,
-list.menu>item .content>icon {
+list.menu>item .content>text[class*="icon"]{
   margin-right: 10rpx;
   display: inline-block;
-  width: 1.4em;
+  width: 1.6em;
+  text-align: center
+}
+ list.menu>item .content>image {
+  margin-right: 10rpx;
+  display: inline-block;
+  width: 1.6em;
   height: 1.6em;
   vertical-align: middle;
-  text-align: center;
 }
 
 list.menu>item .action {
@@ -2024,7 +2138,7 @@ list.grid>item {
   padding: 20rpx;
 }
 
-list.grid>item icon {
+list.grid>item text[class*="icon"] {
   display: block;
   width: 100%;
   position: relative;
@@ -2090,7 +2204,6 @@ bar {
   background: #fff;
   height: 100rpx;
   justify-content: space-between;
-  font-size: 32rpx;
 }
 
 bar .action {
@@ -2106,11 +2219,7 @@ bar .action:first-child {
   font-size: 30rpx;
 }
 
-bar .action:first-child text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+bar .action text.text-cut {
   text-align: left;
   width: 100%;
 }
@@ -2119,21 +2228,20 @@ bar avatar:first-child {
   margin-left: 20rpx;
 }
 
-bar .action:first-child >icon[class*="icon"] {
-  margin-left: -0.5em;
+bar .action:first-child >text[class*="icon"] {
+  margin-left: -0.3em;
+  margin-right: 0.3em;
 }
 
 bar .action:last-child {
   margin-right: 30rpx;
 }
 
-bar .action>icon[class*="icon"] {
+bar .action>text[class*="icon"] {
   font-size: 36rpx;
-  height: 100%;
-  width: 1.4em;
 }
 
-bar .action>icon[class*="icon"]+icon[class*="icon"] {
+bar .action>text[class*="icon"]+text[class*="icon"] {
   margin-left: 0.5em;
 }
 
@@ -2169,7 +2277,7 @@ bar.btn-group button {
   max-width: 50%;
 }
 
-bar .serach-form {
+bar .search-form {
   background: #f5f5f5;
   line-height: 64rpx;
   height: 64rpx;
@@ -2181,15 +2289,11 @@ bar .serach-form {
   margin: 0 20rpx;
 }
 
-bar .serach-form +.action {
+bar .search-form +.action {
   margin-right: 20rpx;
 }
 
-bar .serach-form +.action text+icon {
-  margin-right: -0.5em;
-}
-
-bar .serach-form input {
+bar .search-form input {
   flex: 1;
   padding-right: 20rpx;
   height: 128rpx;
@@ -2197,16 +2301,15 @@ bar .serach-form input {
   font-size: 26rpx;
 }
 
-bar .serach-form [class*="icon"] {
-  width: 2em;
-  height: auto;
+bar .search-form [class*="icon"] {
+  margin: 0 0.5em;
 }
 
-bar .serach-form.round [class*="icon"] {
+bar .search-form.round [class*="icon"] {
   margin-left: 0.5em;
 }
 
-bar .serach-form [class*="icon"]::before {
+bar .search-form [class*="icon"]::before {
   top: 0rpx;
 }
 
@@ -2242,12 +2345,17 @@ bar.shop .action {
   margin: 0 !important;
 }
 
+bar.shop button.action::after {
+  border: 0;
+}
+
 bar.shop [class*="icon"] {
   width: 100rpx !important;
   position: relative;
   display: block;
   height: auto !important;
   margin: 0 auto 10rpx !important;
+  text-align: center;
 }
 
 bar.shop .submit {
@@ -2290,7 +2398,7 @@ bar.shop .action::after {
   left: 0;
   transform: scale(0.5);
   transform-origin: 0 0;
-  border-right: 1rpx solid rgba(0, 0, 0, 0.1);
+  border-right: 1rpx solid rgba(0, 0, 0, 0.1) !important;
 }
 
 bar.input {
@@ -2299,9 +2407,9 @@ bar.input {
 
 bar.input input {
   overflow: initial;
-  line-height: 128rpx;
-  height: 128rpx;
-  min-height: 128rpx;
+  line-height: 64rpx;
+  height: 64rpx;
+  min-height: 64rpx;
   flex: 1;
   font-size: 30rpx;
   margin: 0 20rpx;
@@ -2721,7 +2829,7 @@ form-group input {
   padding-right: 20rpx;
 }
 
-form-group > icon[class*="icon-"] {
+form-group > text[class*="icon"] {
   font-size: 36rpx;
   padding: 0;
   box-sizing: border-box;

demo/icon.wxss

@@ -27,31 +27,6 @@
     font-style: normal;
 }
 
-icon {
-    height: 1em;
-    width: 1.4em;
-    vertical-align: middle;
-    position: relative;
-}
-
-icon[class*="icon-"]::after {
-    content: "正";
-    opacity: 0;
-}
-
-icon[class*="icon-"]::before {
-    position: absolute;
-    display: block;
-    text-align: center;
-    top: 0px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1em;
-    margin: auto;
-    line-height: 1em;
-}
-
 @font-face {font-family: "iconfont";
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */

demo/pages/basics/avatar/avatar.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 头像
+      <text class='icon-back'></text> 头像
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />头像形状
+    <text class='icon-title text-blue'></text>头像形状
   </view>
 </bar>
 <view class="padding">
@@ -16,7 +16,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像尺寸
+    <text class='icon-title text-blue'></text>头像尺寸
   </view>
 </bar>
 <view class="padding">
@@ -27,12 +27,12 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />内嵌文字(图标)
+    <text class='icon-title text-blue'></text>内嵌文字(图标)
   </view>
 </bar>
 <view class="padding">
   <avatar class="radius">
-    <icon class='icon-people' />
+    <text class='icon-people'></text>
   </avatar>
   <avatar class="radius  margin-left">
     <text>港</text>
@@ -41,7 +41,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像颜色
+    <text class='icon-title text-blue'></text>头像颜色
   </view>
 </bar>
 <view class="padding-sm">
@@ -51,7 +51,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像组
+    <text class='icon-title text-blue'></text>头像组
   </view>
 </bar>
 <view class='padding'>
@@ -62,7 +62,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />头像标签
+    <text class='icon-title text-blue'></text>头像标签
   </view>
 </bar>
 <view class='padding'>

demo/pages/basics/background/background.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 背景颜色
+      <text class='icon-back'></text> 背景颜色
     </navigator>
   </bar>
 </custom>
 
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />深色背景
+    <text class='icon-title text-blue'></text>深色背景
   </view>
 </bar>
 <view class='grid col-3 padding-sm'>
@@ -22,7 +22,7 @@
 
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />淡色背景
+    <text class='icon-title text-blue'></text>淡色背景
   </view>
 </bar>
 <view class='grid col-3 bg-white padding-sm'>
@@ -35,7 +35,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />渐变背景
+    <text class='icon-title text-blue'></text>渐变背景
   </view>
 </bar>
 <view class='grid col-2 padding-sm'>
@@ -78,7 +78,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />图片背景
+    <text class='icon-title text-blue'></text>图片背景
   </view>
 </bar>
 <view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
@@ -93,7 +93,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />视频背景
+    <text class='icon-title text-blue'></text>视频背景
   </view>
 </bar>
 <view class="bg-video bg-mask">
@@ -109,7 +109,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />透明背景(文字层)
+    <text class='icon-title text-blue'></text>透明背景(文字层)
   </view>
 </bar>
 <view class='grid col-2 padding-sm'>

demo/pages/basics/button/button.wxml

@@ -1,29 +1,29 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 按钮
+      <text class='icon-back'></text> 按钮
     </navigator>
     <navigator class='action' url='design' hover-class="none">
-      <icon class='icon-skinfill' />
+      <text class='icon-skinfill'></text>
       <text class="text-df">设计</text>
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮形状
+    <text class='icon-title text-blue'></text>按钮形状
   </view>
 </bar>
 <view class="padding flex flex-wrap justify-between align-center">
   <button>默认</button>
   <button class='round'>圆角</button>
   <button class='icon'>
-    <icon class='icon-emojifill' />
+    <text class='icon-emojifill'></text>
   </button>
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮尺寸
+    <text class='icon-title text-blue'></text>按钮尺寸
   </view>
 </bar>
 <view class="padding flex flex-wrap justify-between align-center">
@@ -33,7 +33,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮颜色
+    <text class='icon-title text-blue'></text>按钮颜色
   </view>
   <view class='action'>
     <text class='text-df'>阴影</text>
@@ -47,16 +47,16 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />镂空按钮
+    <text class='icon-title text-blue'></text>镂空按钮
   </view>
   <view class='action'>
     <radio-group bindchange='SetBorderSize'>
       <label class='margin-left-sm'>
-        <radio class='blue sm radio' value='' checked/>
+        <radio class='blue sm radio' value='' checked></radio>
         <text> 小</text>
       </label>
       <label class='margin-left-sm'>
-        <radio class='blue sm radio' value='s' />
+        <radio class='blue sm radio' value='s'></radio>
         <text> 大</text>
       </label>
     </radio-group>
@@ -69,7 +69,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />块状按钮
+    <text class='icon-title text-blue'></text>块状按钮
   </view>
 </bar>
 <view class="padding flex flex-direction">
@@ -78,7 +78,7 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />无效状态
+    <text class='icon-title text-blue'></text>无效状态
   </view>
 </bar>
 <view class="padding">
@@ -87,13 +87,13 @@
 </view>
 <bar class="margin-top ">
   <view class='action'>
-    <icon class='icon-title text-blue' />按钮加图标
+    <text class='icon-title text-blue'></text>按钮加图标
   </view>
 </bar>
 <view class="padding-xl">
   <button class='block line-orange lg'>
-    <icon class='icon-upload' /> 图标</button>
+    <text class='icon-upload'></text> 图标</button>
   <button class='block bg-blue margin-tb-sm lg'>
-    <icon class='icon-loading2 iconfont-spin' /> 加载</button>
+    <text class='icon-loading2 iconfont-spin'></text> 加载</button>
   <button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
 </view>

demo/pages/basics/button/design.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 按钮 / 设计
+      <text class='icon-back'></text> 按钮 / 设计
     </navigator>
   </bar>
 </custom>
@@ -24,15 +24,15 @@
   <view class='title'>选择尺寸</view>
   <radio-group bindchange='SetSize'>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='sm' />
+      <radio class='blue sm radio' value='sm'></radio>
       <text> 小</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='' checked/>
+      <radio class='blue sm radio' value='' checked></radio>
       <text> 中</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='lg' />
+      <radio class='blue sm radio' value='lg'></radio>
       <text> 大</text>
     </label>
   </radio-group>
@@ -49,11 +49,11 @@
   <view class='title'>边框大小</view>
    <radio-group bindchange='SetBorderSize'>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='' checked/>
+      <radio class='blue sm radio' value='' checked></radio>
       <text> 小</text>
     </label>
     <label class='margin-left-sm'>
-      <radio class='blue sm radio' value='s' />
+      <radio class='blue sm radio' value='s'></radio>
       <text> 大</text>
     </label>
   </radio-group>
@@ -69,7 +69,7 @@
     <bar class="justify-end">
       <view class='content'>选择颜色</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='grid col-5 padding'>

demo/pages/basics/form/form.wxml

@@ -1,61 +1,58 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       表单控件
     </navigator>
-    <view class='action'>
-
-    </view>
   </bar>
 </custom>
 <view class='text-center'>
   <view class="padding-xl ">
     <checkbox class=''></checkbox>
     <radio-group>
-      <radio class='' checked name="sex" />
-      <radio class='blue sm' name="sex" />
+      <radio class='' checked name="sex"></radio>
+      <radio class='blue sm' name="sex"></radio>
     </radio-group>
   </view>
   <view class="padding-xl ">
-    <switch class='' />
+    <switch class=''></switch>
     <radio-group>
-      <radio class='red radio' checked name="sex" />
-      <radio class='blue radio' name="sex" />
+      <radio class='red radio' checked name="sex"></radio>
+      <radio class='blue radio' name="sex"></radio>
     </radio-group>
     <checkbox class='blue'></checkbox>
     <checkbox class='cyan round'></checkbox>
   </view>
   <view class="padding-xl ">
-    <switch class=' sm' />
+    <switch class=' sm'></switch>
     <radio-group>
-      <radio class='red radio sm' checked name="sex" />
-      <radio class='blue radio sm' name="sex" />
+      <radio class='red radio sm' checked name="sex"></radio>
+      <radio class='blue radio sm' name="sex"></radio>
     </radio-group>
     <checkbox class='red sm'></checkbox>    
     <checkbox class='cyan round sm'></checkbox>
   </view>
   <view class="padding-xl ">
-    <switch class='switch-sex' checked/>
-    <switch class='switch-sex sm' />
+    <switch class='switch-sex' checked></switch>
+    <switch class='switch-sex sm'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='red' checked/>
-    <switch class='blue sm' checked/>
+    <switch class='red' checked></switch>
+    <switch class='blue sm' checked></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='' checked/>
-    <switch class=' sm' checked/>
+    <switch class='' checked></switch>
+    <switch class=' sm' checked></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='' />
-    <switch class=' sm' />
+    <switch class=''></switch>
+    <switch class=' sm'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='orange sm radius' />
-    <switch class='yellow radius' />
+    <switch class='orange sm radius'></switch>
+    <switch class='yellow radius'></switch>
   </view>
   <view class="padding-xl ">
-    <switch class='blue radius' />
+    <switch class='blue radius'></switch>
   </view>
 </view>

demo/pages/basics/home/home.wxml

@@ -3,6 +3,6 @@
   <navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
     <view class="nav-title">{{item.title}}</view>
     <view class="nav-name">{{item.name}}</view>
-    <icon class='icon-{{item.icon}}'/>
+    <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>

demo/pages/basics/home/home.wxss

@@ -0,0 +1,3 @@
+.weui-tabbar{
+  left: 0px !important;
+}

demo/pages/basics/icon/icon.wxml

@@ -1,22 +1,19 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 图标
+      <text class='icon-back'></text> 图标
     </navigator>
-    <view class='action'>
-
-    </view>
   </bar>
 </custom>
 <bar class="search fixed" style="top:{{CustomBar}}px">
-  <view class='serach-form round'>
-    <icon class="icon-search"/>
-    <input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'/>
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
   </view>
 </bar>
 <list class="grid col-3">
   <item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
-    <icon class='icon-{{item.name}} lg text-gray'/>
+    <text class='icon-{{item.name}} lg text-gray'></text>
     <text>{{item.name}}</text>
   </item>
 </list>

demo/pages/basics/image/image.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
     <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
         <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-            <icon class='icon-back'/>
+            <text class='icon-back'></text>
             图片
         </navigator>
         <view class='action'>

demo/pages/basics/layout/layout.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 布局
+      <text class='icon-back'></text> 布局
     </navigator>
   </bar>
 </custom>
@@ -13,7 +13,7 @@
 <block wx:if="{{TabCur==0}}">
   <bar class="solid-bottom margin-top">
     <view class='action'>
-      <icon class='icon-title text-blue' />固定尺寸
+      <text class='icon-title text-blue'></text>固定尺寸
     </view>
   </bar>
   <view class="padding bg-white">
@@ -29,7 +29,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />比例布局
+      <text class='icon-title text-blue'></text>比例布局
     </view>
   </bar>
   <view class="padding bg-white">
@@ -49,7 +49,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />水平对齐(justify)
+      <text class='icon-title text-blue'></text>水平对齐(justify)
     </view>
   </bar>
   <view class="bg-white">
@@ -76,7 +76,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />垂直对齐(align)
+      <text class='icon-title text-blue'></text>垂直对齐(align)
     </view>
   </bar>
   <view class="bg-white">
@@ -97,7 +97,7 @@
 <block wx:if="{{TabCur==1}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />等分列
+      <text class='icon-title text-blue'></text>等分列
     </view>
     <view class='action'></view>
   </bar>
@@ -108,7 +108,7 @@
   </view>
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />等高
+      <text class='icon-title text-blue'></text>等高
     </view>
     <view class='action'></view>
   </bar>
@@ -121,7 +121,7 @@
 <block wx:if="{{TabCur==2}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />浮动
+      <text class='icon-title text-blue'></text>浮动
     </view>
   </bar>
   <view class="bg-white padding">
@@ -134,7 +134,7 @@
 <block wx:if="{{TabCur==3}}">
   <bar class="margin-top solid-bottom">
     <view class='action'>
-      <icon class='icon-title text-blue' />内外边距
+      <text class='icon-title text-blue'></text>内外边距
     </view>
   </bar>
   <view class="bg-white">

demo/pages/basics/layout/layout.wxss

@@ -1,3 +1,3 @@
 page{
   padding-top: 45px;
-}
+}

demo/pages/basics/loading/loading.js

@@ -2,11 +2,36 @@ const app = getApp();
 Page({
   data: {
     StatusBar: app.globalData.StatusBar,
-    CustomBar: app.globalData.CustomBar
+    CustomBar: app.globalData.CustomBar,
+    loadProgress:0
   },
   isLoading (e) {
     this.setData({
       isLoad: e.detail.value
     })
   },
+  loadModal () {
+    this.setData({
+      loadModal: true
+    })
+    setTimeout(()=> {
+      this.setData({
+        loadModal: false
+      })
+    }, 2000)
+  },
+  loadProgress(){
+    this.setData({
+      loadProgress: this.data.loadProgress+3
+    })
+    if (this.data.loadProgress<100){
+      setTimeout(() => {
+        this.loadProgress();
+      }, 100)
+    }else{
+      this.setData({
+        loadProgress: 0
+      })
+    }
+  }
 });

demo/pages/basics/loading/loading.wxml

@@ -1,31 +1,61 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 加载
+      <text class='icon-back'></text> 加载
     </navigator>
     <view class='action'>
-      <load class="load-icon {{!isLoad?'loading':'over'}}"></load>
+      <load class="load-text {{!isLoad?'loading':'over'}}"></load>
     </view>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue'/>背景
+    <text class='icon-title text-blue'></text>背景
   </view>
 </bar>
 <load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>加载状态
+    <text class='icon-title text-blue'></text>加载状态
   </view>
   <view class='action'>
-  <switch class='sm' bindchange='isLoading'></switch>
+    <switch class='sm' bindchange='isLoading'></switch>
   </view>
 </bar>
 <load class="bg-grey {{!isLoad?'loading':'over'}}"></load>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>加载错误
+    <text class='icon-title text-blue'></text>加载错误
   </view>
 </bar>
-<load class="bg-red erro"></load>
+<load class="bg-red erro"></load>
+
+<bar class="margin-top">
+  <view class='action'>
+    <text class='icon-title text-blue'></text>弹框加载
+  </view>
+  <view class='action'>
+    <button class='bg-green shadow' bindtap='loadModal'>
+      点我
+    </button>
+  </view>
+</bar>
+<load class='load-modal' wx:if="{{loadModal}}"> 
+    <!-- <view class='icon-emojifill text-orange'></view> -->
+    <image src='/images/logo.png' class='png' mode='aspectFit'></image>
+    <view class='gray-text'>加载中...</view>
+</load>
+<bar class="margin-top">
+  <view class='action'>
+    <text class='icon-title text-blue'></text>进度条加载
+  </view>
+  <view class='action'>
+    <button class='bg-green shadow' bindtap='loadProgress'>
+      点我
+    </button>
+  </view>
+</bar>
+<view class='load-progress {{loadProgress!=0?"show":"hide"}}' style="top:{{CustomBar}}px;">
+  <view class='load-progress-bar bg-green' style="transform: translate3d(-{{100-loadProgress}}%, 0px, 0px);"></view>
+  <view class='load-progress-spinner text-green'></view>
+</view>

demo/pages/basics/loading/loading.wxss

@@ -1 +1 @@
-/* pages/basics/load/load.wxss */
+/* pages/basics/load/load.wxss */

demo/pages/basics/progress/progress.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 进度条
+      <text class='icon-back'></text> 进度条
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条形状
+    <text class='icon-title text-blue'></text>进度条形状
   </view>
 </bar>
 <view class="padding bg-white">
@@ -23,7 +23,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条尺寸
+    <text class='icon-title text-blue'></text>进度条尺寸
   </view>
 </bar>
 <view class="padding bg-white">
@@ -40,7 +40,7 @@
 
 <bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条颜色
+    <text class='icon-title text-blue'></text>进度条颜色
   </view>
   <view class='action'>
     <view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
@@ -55,7 +55,7 @@
 
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条条纹
+    <text class='icon-title text-blue'></text>进度条条纹
   </view>
   <switch class='sm margin-right-sm' bindchange='SetActive'></switch>
 </bar>
@@ -69,7 +69,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条比例
+    <text class='icon-title text-blue'></text>进度条比例
   </view>
 </bar>
 <view class="padding bg-white">
@@ -81,7 +81,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />进度条布局
+    <text class='icon-title text-blue'></text>进度条布局
   </view>
 </bar>
 <view class="padding bg-white ">
@@ -89,7 +89,7 @@
     <progress-bar class="round">
       <view class='bg-green' style="width:{{loading?'100%':''}};"></view>
     </progress-bar>
-    <icon class='icon-roundcheckfill text-green margin-left-sm' />
+    <text class='icon-roundcheckfill text-green margin-left-sm'></text>
   </view>
   <view class='flex margin-top'>
     <progress-bar class="round">
@@ -104,7 +104,7 @@
     <bar class="justify-end">
       <view class='content'>选择颜色</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='grid col-5 padding'>

demo/pages/basics/shadow/shadow.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 边框阴影
+      <text class='icon-back'></text> 边框阴影
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue' />边框
+    <text class='icon-title text-blue'></text>边框
   </view>  
   <view class='action'>
    <switch class='sm' bindchange='SetSize'></switch>
@@ -22,7 +22,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />阴影
+    <text class='icon-title text-blue'></text>阴影
   </view>
 </bar>
 <view class="padding text-center">

demo/pages/basics/tag/tag.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 标签
+      <text class='icon-back'></text> 标签
     </navigator>
   </bar>
 </custom>
 
 <bar>
   <view class='action'>
-    <icon class='icon-title text-blue' />标签形状
+    <text class='icon-title text-blue'></text>标签形状
   </view>
 </bar>
 <view class="padding">
@@ -19,7 +19,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />标签尺寸
+    <text class='icon-title text-blue'></text>标签尺寸
   </view>
 </bar>
 <view class="padding">
@@ -28,7 +28,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />标签颜色
+    <text class='icon-title text-blue'></text>标签颜色
   </view>
 </bar>
 <view class='padding-sm flex flex-wrap'>
@@ -41,7 +41,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />镂空标签
+    <text class='icon-title text-blue'></text>镂空标签
   </view>
 </bar>
 <view class='padding-sm flex flex-wrap'>
@@ -51,13 +51,13 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />胶囊样式
+    <text class='icon-title text-blue'></text>胶囊样式
   </view>
 </bar>
 <view class="padding">
   <capsule>
     <tag class='bg-red'>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-red">
       12
@@ -65,7 +65,7 @@
   </capsule>
   <capsule class="round">
     <tag class='bg-blue '>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-blue">
       23
@@ -81,7 +81,7 @@
   </capsule>
   <capsule class="radius">
     <tag class='bg-grey '>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-grey">
       23
@@ -89,7 +89,7 @@
   </capsule>
   <capsule class="radius">
     <tag class='bg-brown sm'>
-      <icon class='icon-likefill' />
+      <text class='icon-likefill'></text>
     </tag>
     <tag class="line-brown sm">
       23
@@ -98,7 +98,7 @@
 </view>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue' />数字标签
+    <text class='icon-title text-blue'></text>数字标签
   </view>
 </bar>
 <view class="padding flex justify-between align-center">
@@ -111,7 +111,7 @@
   </avatar>
   <avatar class='xl radius'>
     <tag class='badge'>99</tag>
-    <icon class='icon-people' />
+    <text class='icon-people'></text>
   </avatar>
   <avatar class='xl radius'>
     <tag class='badge'>99+</tag>

demo/pages/basics/text/text.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 文本
+      <text class='icon-back'></text> 文本
     </navigator>
     <view class='action'>
 
@@ -10,7 +10,7 @@
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字大小
+    <text class='icon-title text-blue'></text>文字大小
   </view>
 </bar>
 <view class='bg-white padding-lr'>
@@ -18,7 +18,7 @@
     <view class='padding'>60</view>
     <view class='flex-sub text-center'>
       <view class='solid-bottom text-xsl padding'>
-        <icon class=' icon-roundcheckfill text-green'/>
+        <text class=' icon-roundcheckfill text-green'></text>
       </view>
       <view class='padding'>用于图标、数字等特大显示</view>
     </view>
@@ -27,7 +27,7 @@
     <view class='padding'>40</view>
     <view class='flex-sub text-center'>
       <view class='solid-bottom text-sl padding'>
-        <icon class=' icon-roundcheckfill text-green'/>
+        <text class=' icon-roundcheckfill text-green'></text>
       </view>
       <view class='padding'>用于图标、数字等较大显示</view>
     </view>
@@ -87,7 +87,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字颜色
+    <text class='icon-title text-blue'></text>文字颜色
   </view>
 </bar>
 <view class='grid col-5 padding-sm'>
@@ -99,7 +99,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字截断
+    <text class='icon-title text-blue'></text>文字截断
   </view>
 </bar>
 <view class='padding bg-white'>
@@ -107,7 +107,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>文字对齐
+    <text class='icon-title text-blue'></text>文字对齐
   </view>
 </bar>
 <view class='padding bg-white'>
@@ -117,7 +117,7 @@
 </view>
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-title text-blue'/>特殊文字
+    <text class='icon-title text-blue'></text>特殊文字
   </view>
 </bar>
 <view class='padding text-center'>

demo/pages/component/bar/bar.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' />
+      <text class='icon-back'></text>
       <text>操作条</text>
     </navigator>
   </bar>
@@ -9,31 +9,31 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-back text-gray' />
+    <text class='icon-back text-gray'></text>
     <text>返回</text>
   </view>
 </bar>
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-green ' />
+    <text class='icon-title text-green'></text>
     <text>案例</text>
   </view>
   <view class='action'>
     <button class='bg-green shadow-blur sm'>添加
-      <icon class='icon-add' /> </button>
+      <text class='icon-add'></text> </button>
   </view>
 </bar>
 
 <bar class="margin-top justify-end">
   <view class='action'>
-    <icon class='icon-close text-red'></icon>
+    <text class='icon-close text-red'></text>
   </view>
 </bar>
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-back text-gray' /> 返回
+    <text class='icon-back text-gray'></text> 返回
   </view>
   <view class='content'>
     操作条
@@ -42,20 +42,20 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-homefill text-gray' /> 首页
+    <text class='icon-homefill text-gray'></text> 首页
   </view>
   <view class='content'>
     鲜亮的高饱和色彩，专注视觉的小程序组件库
   </view>
   <view class='action'>
-    <icon class='icon-cardboardfill text-grey' />
-    <icon class='icon-recordfill text-red' />
+    <text class='icon-cardboardfill text-grey'></text>
+    <text class='icon-recordfill text-red'></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-blue">
   <view class='action'>
-    <icon class='icon-close' /> 关闭
+    <text class='icon-close'></text> 关闭
   </view>
   <view class='content'>
     海蓝
@@ -63,7 +63,7 @@
 </bar>
 <bar class="margin-top bg-orange">
   <view class='action'>
-    <icon class='icon-back' /> 返回
+    <text class='icon-back'></text> 返回
   </view>
   <view class='content'>
     操作条
@@ -76,49 +76,49 @@
     ColorUI
   </view>
   <view class='action'>
-    <icon class="icon-more" />
+    <text class="icon-more"></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-red search">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
-  <view class='serach-form radius'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form radius'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <text>广州</text>
-    <icon class="icon-triangledownfill" />
+    <text class="icon-triangledownfill"></text>
   </view>
 </bar>
 
 <bar class="margin-top search">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <text>广州</text>
-    <icon class="icon-triangledownfill" />
+    <text class="icon-triangledownfill"></text>
   </view>
 </bar>
 
 <bar class="margin-top bg-cyan search">
-  <view class='serach-form radius'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form radius'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
-    <icon class='icon-close' />
+    <text class='icon-close'></text>
     <text>取消</text>
   </view>
 </bar>
 
 <bar class="margin-top search">
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
   </view>
   <view class='action'>
     <button class='bg-green shadow-blur round'>搜索</button>
@@ -144,35 +144,35 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action text-orange">
-    <icon class='icon-favorfill' /> 已收藏
+    <text class='icon-favorfill'></text> 已收藏
   </view>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='bg-red submit'>立即订购</view>
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='bg-orange submit'>加入购物车</view>
@@ -180,19 +180,19 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
+  </button>
+  <view class="action">
+    <text class=' icon-shop'></text> 店铺
   </view>
   <view class="action">
-    <icon class=' icon-shop' /> 店铺
-  </view>
-  <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='submit'>
@@ -201,16 +201,16 @@
 </bar>
 
 <bar class="margin-top shop">
-  <view class="action">
-    <icon class='icon-service text-green'>
+  <button class="action"  open-type='contact'>
+    <text class='icon-service text-green'>
       <tag class='badge'></tag>
-    </icon>
+    </text>
     客服
-  </view>
+  </button>
   <view class="action">
-    <icon class='icon-cart'>
+    <text class='icon-cart'>
       <tag class='badge'>99</tag>
-    </icon>
+    </text>
     购物车
   </view>
   <view class='submit'>
@@ -223,11 +223,11 @@
 
 <bar class="margin-top input">
   <view class='action'>
-    <icon class='icon-sound text-grey' />
+    <text class='icon-sound text-grey'></text>
   </view>
   <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey' />
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>
@@ -235,11 +235,11 @@
 <bar class="margin-top input">
   <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
   <view class='action'>
-    <icon class='icon-roundaddfill text-grey' />
+    <text class='icon-roundaddfill text-grey'></text>
   </view>
   <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey' />
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>

demo/pages/component/card/card.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 卡片
+      <text class='icon-back'></text> 卡片
     </navigator>
   </bar>
 </custom>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 案例类卡片
+    <text class='icon-titles text-orange '></text> 案例类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -28,9 +28,9 @@
           <view class='text-gray text-sm flex justify-between'>
             十天前
             <view class="text-gray text-sm">
-              <icon class="icon-attentionfill" /> 10
-              <icon class="icon-appreciatefill" /> 20
-              <icon class="icon-messagefill" /> 30
+              <text class="icon-attentionfill"></text> 10
+              <text class="icon-appreciatefill"></text> 20
+              <text class="icon-messagefill"></text> 30
             </view>
           </view>
         </view>
@@ -40,7 +40,7 @@
 </card>
 <bar class="solid-bottom {{isCard?'margin-top':''}}">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 动态类卡片
+    <text class='icon-titles text-orange '></text> 动态类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -67,9 +67,9 @@
       </view>
     </view>
     <view class='text-gray text-sm text-right padding'>
-      <icon class="icon-attentionfill" /> 10
-      <icon class="icon-appreciatefill" /> 20
-      <icon class="icon-messagefill" /> 30
+      <text class="icon-attentionfill"></text> 10
+      <text class="icon-appreciatefill"></text> 20
+      <text class="icon-messagefill"></text> 30
     </view>
     <list class="menu menu-avatar comment solids-top">
       <item wx:for="{{2}}" wx:key>
@@ -88,8 +88,8 @@
           <view class='margin-top-sm flex justify-between'>
             <view class='text-gray text-df'>2018年12月4日</view>
             <view>
-              <icon class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}" />
-              <icon class="icon-messagefill text-gray margin-left-sm" />
+              <text class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}"></text>
+              <text class="icon-messagefill text-gray margin-left-sm"></text>
             </view>
           </view>
         </view>
@@ -100,7 +100,7 @@
 
 <bar class="solid-bottom margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 文章类卡片
+    <text class='icon-titles text-orange '></text> 文章类卡片
   </view>
   <view class='action'>
     <switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>

demo/pages/component/chat/chat.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       聊天
     </navigator>
   </bar>
@@ -28,7 +28,7 @@
     <view class='date '> 13:23</view>
   </item>
   <info>
-    <icon class='icon-roundclosefill text-red '/> 对方拒绝了你的消息
+    <text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
   </info>
   <info>
     对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
@@ -47,7 +47,7 @@
         3"
       </view>
       <view class='content shadow'>
-        <icon class='icon-sound text-xxl padding-right-xl'> </icon>
+        <text class='icon-sound text-xxl padding-right-xl'> </text>
       </view>
     </view>
     <avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
@@ -56,7 +56,7 @@
   <item class="self">
     <view class="main">
       <view class='action'>
-        <icon class='icon-locationfill text-orange text-xxl'/>
+        <text class='icon-locationfill text-orange text-xxl'></text>
       </view>
       <view class='content shadow'>
         喵星球，喵喵市
@@ -72,7 +72,7 @@
        @#$^&**
       </view>      
       <view class='action text-grey'>
-        <icon class='icon-warnfill text-red text-xxl'/> <text class='text-sm margin-left-sm'>翻译错误</text> 
+        <text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text> 
       </view>
     </view>
     <view class='date'>13:23</view>
@@ -81,11 +81,11 @@
 
 <bar class="foot input">
   <view class='action'>
-    <icon class='icon-sound text-grey'/>
+    <text class='icon-sound text-grey'></text>
   </view>
   <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
   <view class='action'>
-    <icon class='icon-emojifill text-grey'/>
+    <text class='icon-emojifill text-grey'></text>
   </view>
   <button class='bg-green shadow-blur'>发送</button>
 </bar>

demo/pages/component/form/form.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 表单
+      <text class='icon-back'></text> 表单
     </navigator>
   </bar>
 </custom>
@@ -22,7 +22,7 @@
   <form-group>
     <view class='title'>收货地址</view>
     <input placeholder="输入框带个图标" class='radius' name='input'></input>
-    <icon class='icon-locationfill text-orange' />
+    <text class='icon-locationfill text-orange'></text>
   </form-group>
   <form-group>
     <view class='title'>验证码</view>
@@ -94,34 +94,34 @@
   </form-group>
   <form-group>
     <view class='title'>定义颜色</view>
-    <switch class='red sm' checked/>
+    <switch class='red sm' checked></switch>
   </form-group>
   <form-group>
-    <switch class='switch-sex' checked/>
+    <switch class='switch-sex' checked></switch>
     <view class='title'>定义图标</view>
   </form-group>
   <form-group>
     <view class='title'>方形开关</view>
-    <switch class='orange radius sm' checked/>
+    <switch class='orange radius sm' checked></switch>
   </form-group>
   <radio-group class="block">
     <form-group class="margin-top">
       <view class='title'>单选操作(radio)</view>
-      <radio checked />
+      <radio checked></radio>
     </form-group>
     <form-group>
       <view class='title'>定义尺寸</view>
-      <radio class='sm' />
+      <radio class='sm'></radio>
     </form-group>
     <form-group>
       <view class='title'>定义样式</view>
-      <radio class='radio' />
+      <radio class='radio'></radio>
     </form-group>
     <form-group>
       <view class='title'>定义颜色</view>
       <view>
-        <radio class='blue radio' />
-        <radio class='red margin-left-sm' />
+        <radio class='blue radio'></radio>
+        <radio class='red margin-left-sm'></radio>
       </view>
     </form-group>
   </radio-group>
@@ -148,11 +148,11 @@
       </view>
       <view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
         <tag class="bg-red">
-          <icon class='icon-close'></icon>
+          <text class='icon-close'></text>
         </tag>
       </view>
       <view class="padding-xs solids">
-        <icon class='icon-cameraadd'></icon>
+        <text class='icon-cameraadd'></text>
       </view>
     </view>
   </form-group>

demo/pages/component/home/home.wxml

@@ -3,6 +3,6 @@
   <navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
     <view class="nav-title">{{item.title}}</view>
     <view class="nav-name">{{item.name}}</view>
-    <icon class='icon-{{item.icon}}'/>
+    <text class='icon-{{item.icon}}'></text>
   </navigator>
 </view>

demo/pages/component/list/list.wxml

@@ -1,173 +1,173 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/> 列表
+      <text class='icon-back'></text> 列表
     </navigator>
   </bar>
 </custom>
 <view class="page {{skin?' invert ':' '}}">
   <list class="grid col-3">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
     <item>
-      <icon class='icon-servicefill text-pink'/>
+      <text class='icon-servicefill text-pink'></text>
       <text>反馈</text>
     </item>
   </list>
   <list class="grid col-4">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
   </list>
   <list class="grid no-border col-4">
     <item>
-      <icon class='icon-cardboardfill text-red'/>
+      <text class='icon-cardboardfill text-red'></text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
+      <text class='icon-noticefill text-olive'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
   </list>
   <list class="grid col-5 no-border">
     <item>
-      <icon class='icon-cardboardfill text-red'>
+      <text class='icon-cardboardfill text-red'>
         <tag class="badge">99+</tag>
-      </icon>
+      </text>
       <text>VR</text>
     </item>
     <item>
-      <icon class='icon-recordfill text-orange'/>
+      <text class='icon-recordfill text-orange'></text>
       <text>录像</text>
     </item>
     <item>
-      <icon class='icon-picfill text-yellow'/>
+      <text class='icon-picfill text-yellow'></text>
       <text>图像</text>
     </item>
     <item>
-      <icon class='icon-noticefill text-olive'>
-      </icon>
+      <text class='icon-noticefill text-olive'>
+      </text>
       <text>通知</text>
     </item>
     <item>
-      <icon class='icon-upstagefill text-cyan'/>
+      <text class='icon-upstagefill text-cyan'></text>
       <text>排行榜</text>
     </item>
     <item>
-      <icon class='icon-clothesfill text-blue'>
+      <text class='icon-clothesfill text-blue'>
         <tag class="badge"></tag>
-      </icon>
+      </text>
       <text>皮肤</text>
     </item>
     <item>
-      <icon class='icon-discoverfill text-purple'/>
+      <text class='icon-discoverfill text-purple'></text>
       <text>发现</text>
     </item>
     <item>
-      <icon class='icon-questionfill text-mauve'/>
+      <text class='icon-questionfill text-mauve'></text>
       <text>帮助</text>
     </item>
     <item>
-      <icon class='icon-commandfill text-purple'/>
+      <text class='icon-commandfill text-purple'></text>
       <text>问答</text>
     </item>
     <item>
-      <icon class='icon-brandfill text-mauve'/>
+      <text class='icon-brandfill text-mauve'></text>
       <text>版权</text>
     </item>
   </list>
@@ -175,23 +175,23 @@
     <item>
       <view class='content'>
         <view>
-          <icon class='icon-clothesfill text-blue'/> 皮肤设置</view>
+          <text class='icon-clothesfill text-blue'></text> 皮肤设置</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill'/> 皮肤需要付费购买</view>
+          <text class='icon-infofill'></text> 皮肤需要付费购买</view>
       </view>
       <view class='action'>
-        <switch class='switch-sex sm' bindchange="switchSex" />
+        <switch class='switch-sex sm' bindchange="switchSex"></switch>
       </view>
     </item>
     <item>
       <view class='content'>
         <view>
-          <icon class='icon-musicfill text-red'/> 声音控制</view>
+          <text class='icon-musicfill text-red'></text> 声音控制</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill'/> 需要获得系统权限</view>
+          <text class='icon-infofill'></text> 需要获得系统权限</view>
       </view>
       <view class='action'>
-        <switch class='switch-music' />
+        <switch class='switch-music'></switch>
       </view>
     </item>
   </list>
@@ -201,7 +201,7 @@
       <view class='content'>
         <view class='text-grey'>文晓港</view>
         <view class='text-gray text-sm'>
-          <icon class='icon-infofill text-red'/> 消息未送达</view>
+          <text class='icon-infofill text-red'></text> 消息未送达</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
@@ -217,11 +217,11 @@
           <tag class="round bg-orange sm">SVIP</tag>
         </view>
         <view class='text-gray text-sm'>
-          <icon class='icon-redpacket_fill text-red'/> 收到红包</view>
+          <text class='icon-redpacket_fill text-red'></text> 收到红包</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
-        <icon class='icon-notice_forbid_fill text-gray'/>
+        <text class='icon-notice_forbid_fill text-gray'></text>
       </view>
     </item>
   </list>
@@ -260,35 +260,53 @@
         </view>
         <view class='text-gray text-sm'>
           喵星酱：
-          <icon class='icon-picfill text-orange'/> 图片传输中...</view>
+          <text class='icon-picfill text-orange'></text> 图片传输中...</view>
       </view>
       <view class='action'>
         <view class='text-grey text-xs'>22:20</view>
-        <icon class='icon-notice_forbid_fill text-gray'/>
+        <text class='icon-notice_forbid_fill text-gray'></text>
       </view>
     </item>
   </list>
   <list class="menu">
     <item>
       <view class='content'>
-        <icon class='icon-circlefill text-grey'/>
-        <text class='text-grey'>默认</text>
+        <text class='icon-circlefill text-grey'></text>
+        <text class='text-grey'>图标 + 标题</text>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-emojifill text-red'/>
+        <image src='/images/logo.png' class='png' mode='aspectFit'></image>
+        <text class='text-grey'>图片 + 标题</text>
+      </view>
+    </item>
+    <item>
+      <button class='content' open-type='contact'>
+        <text class='icon-btn text-olive'></text>
+        <text class='text-grey'>Open-type 按钮</text>
+      </button>
+    </item>
+    <item>
+      <navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
+        <text class='icon-discoverfill text-orange'></text>
+        <text class='text-grey'>Navigator 跳转</text>
+      </navigator>
+    </item>
+    <item>
+      <view class='content'>
+        <text class='icon-emojifill text-red'></text>
         <text class='text-grey'>头像</text>
       </view>
       <view class='action'>
         <avatar class="sm round">
-          <icon class='icon-people'/>
+          <text class='icon-people'></text>
         </avatar>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-emojiflashfill text-pink'/>
+        <text class='icon-emojiflashfill text-pink'></text>
         <text class='text-grey'>头像组</text>
       </view>
       <view class='action'>
@@ -303,35 +321,35 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-crown text-green'/>
+        <text class='icon-crown text-green'></text>
         <text class='text-grey'>按钮</text>
       </view>
       <view class='action'>
         <button class='round bg-green sm'>
-          <icon class='icon-upload'/> 上传</button>
+          <text class='icon-upload'></text> 上传</button>
       </view>
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-crownfill text-green'/>
+        <text class='icon-crownfill text-green'></text>
         <text class='text-grey'>按钮</text>
       </view>
       <view class='action'>
         <button class='round bg-blue'>
-          <icon class='icon-down'/> 下载</button>
+          <text class='icon-down'></text> 下载</button>
       </view>
     </item>
   </list>
   <list class="menu">
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-roundrightfill text-grey'/>
+        <text class='icon-roundrightfill text-grey'></text>
         <text class='text-grey'>箭头</text>
       </view>
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-tagfill text-red'/>
+        <text class='icon-tagfill text-red'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -342,7 +360,7 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-warn text-green'/>
+        <text class='icon-warn text-green'></text>
         <text class='text-grey'>文本</text>
       </view>
       <view class='action'>
@@ -351,7 +369,7 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-warnfill text-green'/>
+        <text class='icon-warnfill text-green'></text>
         <text class='text-grey'>文本</text>
         <text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
       </view>
@@ -360,7 +378,7 @@
   <list class="menu no-padding">
     <item>
       <view class='content'>
-        <icon class='icon-radiobox text-orange'/>
+        <text class='icon-radiobox text-orange'></text>
         <text class='text-grey'>徽章</text>
       </view>
       <view class='action'>
@@ -369,7 +387,7 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-tagfill text-olive'/>
+        <text class='icon-tagfill text-olive'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -378,13 +396,13 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-radioboxfill text-blue'/>
+        <text class='icon-radioboxfill text-blue'></text>
         <text class='text-grey'>胶囊</text>
       </view>
       <view class='action'>
         <capsule class="round">
           <tag class='bg-blue'>
-            <icon class='icon-locationfill'/>
+            <text class='icon-locationfill'></text>
           </tag>
           <tag class="line-blue">
             广州
@@ -396,7 +414,7 @@
   <list class="menu no-padding card-menu margin-bottom-xl">
     <item>
       <view class='content'>
-        <icon class='icon-radiobox text-orange'/>
+        <text class='icon-radiobox text-orange'></text>
         <text class='text-grey'>徽章</text>
       </view>
       <view class='action'>
@@ -405,7 +423,7 @@
     </item>
     <item>
       <view class='content'>
-        <icon class='icon-tagfill text-olive'/>
+        <text class='icon-tagfill text-olive'></text>
         <text class='text-grey'>标签</text>
       </view>
       <view class='action'>
@@ -414,13 +432,13 @@
     </item>
     <item class="arrow">
       <view class='content'>
-        <icon class='icon-radioboxfill text-blue'/>
+        <text class='icon-radioboxfill text-blue'></text>
         <text class='text-grey'>胶囊</text>
       </view>
       <view class='action'>
         <capsule class="round">
           <tag class='bg-blue'>
-            <icon class='icon-locationfill'/>
+            <text class='icon-locationfill'></text>
           </tag>
           <tag class="line-blue">
             广州

demo/pages/component/modal/modal.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 模态窗口
+      <text class='icon-back'></text> 模态窗口
     </navigator>
   </bar>
 </custom>
 
 <bar class="">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 模态窗口
+    <text class='icon-titles text-orange '></text> 模态窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
@@ -19,7 +19,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -30,7 +30,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 底部窗口
+    <text class='icon-titles text-orange '></text> 底部窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -50,7 +50,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 对话窗口
+    <text class='icon-titles text-orange '></text> 对话窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -62,7 +62,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -83,7 +83,7 @@
     <bar class="justify-end">
       <view class='content'>Modal标题</view>
       <view class='action' bindtap='hideModal'>
-        <icon class='icon-close text-red'></icon>
+        <text class='icon-close text-red'></text>
       </view>
     </bar>
     <view class='padding-xl'>
@@ -91,7 +91,7 @@
     </view>
     <bar>
       <view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
-        <icon class='icon-moneybag'></icon>微信支付</view>
+        <text class='icon-moneybag'></text>微信支付</view>
       <view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
       <view class='action margin-0 flex-sub  solid-left' bindtap='hideModal'>确定</view>
     </bar>
@@ -100,7 +100,7 @@
 
 <bar class=" margin-top">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 图片窗口
+    <text class='icon-titles text-orange '></text> 图片窗口
   </view>
   <view class='action'>
     <button class='bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
@@ -112,7 +112,7 @@
     <view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
       <bar class="justify-end none-bg text-white">
         <view class='action' bindtap='hideModal'>
-          <icon class='icon-close '></icon>
+          <text class='icon-close '></text>
         </view>
       </bar>
     </view>

demo/pages/component/nav/nav.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 导航栏
+      <text class='icon-back'></text> 导航栏
     </navigator>
   </bar>
 </custom>
@@ -10,7 +10,7 @@
 </view>
 <bar class="solid-bottom">
   <view class='action'>
-    <icon class='icon-titles text-orange ' /> 默认
+    <text class='icon-titles text-orange '></text> 默认
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
@@ -21,7 +21,7 @@
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 居中
+    <text class='icon-title text-orange'></text> 居中
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav text-center">
@@ -32,7 +32,7 @@
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 平分
+    <text class='icon-title text-orange'></text> 平分
   </view>
 </bar>
 <scroll-view scroll-x class="bg-white nav">
@@ -44,7 +44,7 @@
 </scroll-view>
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 背景
+    <text class='icon-title text-orange'></text> 背景
   </view>
 </bar>
 <scroll-view scroll-x class="bg-red nav text-center">
@@ -54,34 +54,34 @@
 </scroll-view>
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 图标
+    <text class='icon-title text-orange'></text> 图标
   </view>
 </bar>
 <scroll-view scroll-x class="bg-green nav text-center">
   <item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
-    <icon class='icon-camerafill'></icon> 数码
+    <text class='icon-camerafill'></text> 数码
   </item>
   <item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
-    <icon class='icon-upstagefill'></icon> 排行榜
+    <text class='icon-upstagefill'></text> 排行榜
   </item>
   <item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
-    <icon class='icon-clothesfill'></icon> 皮肤
+    <text class='icon-clothesfill'></text> 皮肤
   </item>
 </scroll-view>
 
 <bar class="margin-top solid-bottom">
   <view class='action'>
-    <icon class='icon-title text-orange' /> 定位
+    <text class='icon-title text-orange'></text> 定位
   </view>
 </bar>
 <scroll-view scroll-x class="bg-green nav text-center">
   <item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
-    <icon class='icon-camerafill'></icon> 数码
+    <text class='icon-camerafill'></text> 数码
   </item>
   <item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
-    <icon class='icon-upstagefill'></icon> 排行榜
+    <text class='icon-upstagefill'></text> 排行榜
   </item>
   <item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
-    <icon class='icon-clothesfill'></icon> 皮肤
+    <text class='icon-clothesfill'></text> 皮肤
   </item>
 </scroll-view>

demo/pages/component/swiper/swiper.wxml

@@ -1,13 +1,13 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 轮播图
+      <text class='icon-back'></text> 轮播图
     </navigator>
   </bar>
 </custom>
 <bar>
   <view class='action'>
-    <icon class='icon-title text-pink' /> 全屏限高轮播
+    <text class='icon-title text-pink'></text> 全屏限高轮播
   </view>
   <view class='action'>
     <switch class='sm' bindchange='DotStyle'></switch>
@@ -15,12 +15,12 @@
 </bar>
 <swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
   <swiper-item wx:for="{{4}}" wx:key>
-    <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
+    <image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
   </swiper-item>
 </swiper>
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-pink' /> 卡片式轮播
+    <text class='icon-title text-pink'></text> 卡片式轮播
   </view>
 </bar>
 <swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
@@ -31,7 +31,7 @@
 
 <bar class="margin-top">
   <view class='action'>
-    <icon class='icon-title text-pink' /> 堆叠式轮播
+    <text class='icon-title text-pink'></text> 堆叠式轮播
   </view>
 </bar>
 <view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">

demo/pages/component/timeline/timeline.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back'/>
+      <text class='icon-back'></text>
       时间轴
     </navigator>
   </bar>
@@ -61,7 +61,7 @@
           <view class='content'>
             <view class='text-grey'>文晓港</view>
             <view class='text-gray text-sm'>
-              <icon class='icon-infofill text-red'/> 消息未送达</view>
+              <text class='icon-infofill text-red'></text> 消息未送达</view>
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
@@ -77,11 +77,11 @@
               <tag class="round orange sm">SVIP</tag>
             </view>
             <view class='text-gray text-sm'>
-              <icon class='icon-redpacket_fill text-red'/> 收到红包</view>
+              <text class='icon-redpacket_fill text-red'></text> 收到红包</view>
           </view>
           <view class='action'>
             <view class='text-grey text-xs'>22:20</view>
-            <icon class='icon-notice_forbid_fill text-gray'/>
+            <text class='icon-notice_forbid_fill text-gray'></text>
           </view>
         </item>
       </list>

demo/pages/plugin/animation/animation.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 微动画
+      <text class='icon-back'></text> 微动画
     </navigator>
   </bar>
 </custom>

demo/pages/plugin/gradual/gradual.wxml

@@ -1,7 +1,7 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 渐变
+      <text class='icon-back'></text> 渐变
     </navigator>
   </bar>
 </custom>

demo/pages/plugin/indexes/indexes.wxml

@@ -1,14 +1,14 @@
 <custom style="height:{{CustomBar}}px;">
   <bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
     <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
-      <icon class='icon-back' /> 索引
+      <text class='icon-back'></text> 索引
     </navigator>
   </bar>
 </custom>
 <bar class="search fixed" style="top:{{CustomBar}}px;">
-  <view class='serach-form round'>
-    <icon class="icon-search" />
-    <input type="text" placeholder="输入搜索的关键词" confirm-type="search" />
+  <view class='search-form round'>
+    <text class="icon-search"></text>
+    <input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
   </view>
   <view class='action'>
     <button class='gradual-green shadow-blur round'>搜索</button>

template/app.wxss

@@ -1,2 +1,2 @@
 @import "icon.wxss";
-@import "colorui-rpx.wxss";
+@import "colorui.wxss";

template/icon.wxss

@@ -27,31 +27,6 @@
     font-style: normal;
 }
 
-icon {
-    height: 1em;
-    width: 1.4em;
-    vertical-align: middle;
-    position: relative;
-}
-
-icon[class*="icon-"]::after {
-    content: "正";
-    opacity: 0;
-}
-
-icon[class*="icon-"]::before {
-    position: absolute;
-    display: block;
-    text-align: center;
-    top: 0px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 1em;
-    margin: auto;
-    line-height: 1em;
-}
-
 @font-face {font-family: "iconfont";
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831'); /* IE9*/
   src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'), /* IE6-IE8 */