diff --git a/examples/hello-uniapp/common/icon.css b/examples/hello-uniapp/common/icon.css
deleted file mode 100644
index 0773cfb34f320f196be691d24832334f69be7cb6..0000000000000000000000000000000000000000
--- a/examples/hello-uniapp/common/icon.css
+++ /dev/null
@@ -1,377 +0,0 @@
-@font-face {
-	font-family: uniicons;
-	font-weight: normal;
-	font-style: normal;
-	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf?t=1536565627510') format('truetype');
-}
-
-.uni-icon {
-	font-family: uniicons;
-	font-size: 24px;
-	font-weight: normal;
-	font-style: normal;
-	line-height: 1;
-	display: inline-block;
-	text-decoration: none;
-	-webkit-font-smoothing: antialiased;
-}
-
-.uni-icon.uni-active {
-	color: #007aff;
-}
-
-.uni-icon-contact:before {
-	content: '\e100';
-}
-
-.uni-icon-person:before {
-	content: '\e101';
-}
-
-.uni-icon-personadd:before {
-	content: '\e102';
-}
-
-.uni-icon-contact-filled:before {
-	content: '\e130';
-}
-
-.uni-icon-person-filled:before {
-	content: '\e131';
-}
-
-.uni-icon-personadd-filled:before {
-	content: '\e132';
-}
-
-.uni-icon-phone:before {
-	content: '\e200';
-}
-
-.uni-icon-email:before {
-	content: '\e201';
-}
-
-.uni-icon-chatbubble:before {
-	content: '\e202';
-}
-
-.uni-icon-chatboxes:before {
-	content: '\e203';
-}
-
-.uni-icon-phone-filled:before {
-	content: '\e230';
-}
-
-.uni-icon-email-filled:before {
-	content: '\e231';
-}
-
-.uni-icon-chatbubble-filled:before {
-	content: '\e232';
-}
-
-.uni-icon-chatboxes-filled:before {
-	content: '\e233';
-}
-
-.uni-icon-weibo:before {
-	content: '\e260';
-}
-
-.uni-icon-weixin:before {
-	content: '\e261';
-}
-
-.uni-icon-pengyouquan:before {
-	content: '\e262';
-}
-
-.uni-icon-chat:before {
-	content: '\e263';
-}
-
-.uni-icon-qq:before {
-	content: '\e264';
-}
-
-.uni-icon-videocam:before {
-	content: '\e300';
-}
-
-.uni-icon-camera:before {
-	content: '\e301';
-}
-
-.uni-icon-mic:before {
-	content: '\e302';
-}
-
-.uni-icon-location:before {
-	content: '\e303';
-}
-
-.uni-icon-mic-filled:before,
-.uni-icon-speech:before {
-	content: '\e332';
-}
-
-.uni-icon-location-filled:before {
-	content: '\e333';
-}
-
-.uni-icon-micoff:before {
-	content: '\e360';
-}
-
-.uni-icon-image:before {
-	content: '\e363';
-}
-
-.uni-icon-map:before {
-	content: '\e364';
-}
-
-.uni-icon-compose:before {
-	content: '\e400';
-}
-
-.uni-icon-trash:before {
-	content: '\e401';
-}
-
-.uni-icon-upload:before {
-	content: '\e402';
-}
-
-.uni-icon-download:before {
-	content: '\e403';
-}
-
-.uni-icon-close:before {
-	content: '\e404';
-}
-
-.uni-icon-redo:before {
-	content: '\e405';
-}
-
-.uni-icon-undo:before {
-	content: '\e406';
-}
-
-.uni-icon-refresh:before {
-	content: '\e407';
-}
-
-.uni-icon-star:before {
-	content: '\e408';
-}
-
-.uni-icon-plus:before {
-	content: '\e409';
-}
-
-.uni-icon-minus:before {
-	content: '\e410';
-}
-
-.uni-icon-circle:before,
-.uni-icon-checkbox:before {
-	content: '\e411';
-}
-
-.uni-icon-close-filled:before,
-.uni-icon-clear:before {
-	content: '\e434';
-}
-
-.uni-icon-refresh-filled:before {
-	content: '\e437';
-}
-
-.uni-icon-star-filled:before {
-	content: '\e438';
-}
-
-.uni-icon-plus-filled:before {
-	content: '\e439';
-}
-
-.uni-icon-minus-filled:before {
-	content: '\e440';
-}
-
-.uni-icon-circle-filled:before {
-	content: '\e441';
-}
-
-.uni-icon-checkbox-filled:before {
-	content: '\e442';
-}
-
-.uni-icon-closeempty:before {
-	content: '\e460';
-}
-
-.uni-icon-refreshempty:before {
-	content: '\e461';
-}
-
-.uni-icon-reload:before {
-	content: '\e462';
-}
-
-.uni-icon-starhalf:before {
-	content: '\e463';
-}
-
-.uni-icon-spinner:before {
-	content: '\e464';
-}
-
-.uni-icon-spinner-cycle:before {
-	content: '\e465';
-}
-
-.uni-icon-search:before {
-	content: '\e466';
-}
-
-.uni-icon-plusempty:before {
-	content: '\e468';
-}
-
-.uni-icon-forward:before {
-	content: '\e470';
-}
-
-.uni-icon-back:before,
-.uni-icon-left-nav:before {
-	content: '\e471';
-}
-
-.uni-icon-checkmarkempty:before {
-	content: '\e472';
-}
-
-.uni-icon-home:before {
-	content: '\e500';
-}
-
-.uni-icon-navigate:before {
-	content: '\e501';
-}
-
-.uni-icon-gear:before {
-	content: '\e502';
-}
-
-.uni-icon-paperplane:before {
-	content: '\e503';
-}
-
-.uni-icon-info:before {
-	content: '\e504';
-}
-
-.uni-icon-help:before {
-	content: '\e505';
-}
-
-.uni-icon-locked:before {
-	content: '\e506';
-}
-
-.uni-icon-more:before {
-	content: '\e507';
-}
-
-.uni-icon-flag:before {
-	content: '\e508';
-}
-
-.uni-icon-home-filled:before {
-	content: '\e530';
-}
-
-.uni-icon-gear-filled:before {
-	content: '\e532';
-}
-
-.uni-icon-info-filled:before {
-	content: '\e534';
-}
-
-.uni-icon-help-filled:before {
-	content: '\e535';
-}
-
-.uni-icon-more-filled:before {
-	content: '\e537';
-}
-
-.uni-icon-settings:before {
-	content: '\e560';
-}
-
-.uni-icon-list:before {
-	content: '\e562';
-}
-
-.uni-icon-bars:before {
-	content: '\e563';
-}
-
-.uni-icon-loop:before {
-	content: '\e565';
-}
-
-.uni-icon-paperclip:before {
-	content: '\e567';
-}
-
-.uni-icon-eye:before {
-	content: '\e568';
-}
-
-.uni-icon-arrowup:before {
-	content: '\e580';
-}
-
-.uni-icon-arrowdown:before {
-	content: '\e581';
-}
-
-.uni-icon-arrowleft:before {
-	content: '\e582';
-}
-
-.uni-icon-arrowright:before {
-	content: '\e583';
-}
-
-.uni-icon-arrowthinup:before {
-	content: '\e584';
-}
-
-.uni-icon-arrowthindown:before {
-	content: '\e585';
-}
-
-.uni-icon-arrowthinleft:before {
-	content: '\e586';
-}
-
-.uni-icon-arrowthinright:before {
-	content: '\e587';
-}
-
-.uni-icon-pulldown:before {
-	content: '\e588';
-}
-
-.uni-icon-scan:before {
-    content: "\e612";
-}
diff --git a/examples/hello-uniapp/common/uni.css b/examples/hello-uniapp/common/uni.css
index d965250e9e412653d661a3c1a456e3a87842c078..180bc835d1d8e5ece99314e75d84decd81073f06 100644
--- a/examples/hello-uniapp/common/uni.css
+++ b/examples/hello-uniapp/common/uni.css
@@ -1051,4 +1051,378 @@ radio-group label, checkbox-group label{
 	/* 自定义节点颜色 */
 	.uni-timeline-last-item .uni-timeline-item-divider{
 		background-color: #1AAD19;
-	}
\ No newline at end of file
+	}
+  
+  
+/* uni-icon */
+
+.uni-icon {
+	font-family: uniicons;
+	font-size: 24px;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.uni-icon.uni-active {
+	color: #007aff;
+}
+
+.uni-icon-contact:before {
+	content: '\e100';
+}
+
+.uni-icon-person:before {
+	content: '\e101';
+}
+
+.uni-icon-personadd:before {
+	content: '\e102';
+}
+
+.uni-icon-contact-filled:before {
+	content: '\e130';
+}
+
+.uni-icon-person-filled:before {
+	content: '\e131';
+}
+
+.uni-icon-personadd-filled:before {
+	content: '\e132';
+}
+
+.uni-icon-phone:before {
+	content: '\e200';
+}
+
+.uni-icon-email:before {
+	content: '\e201';
+}
+
+.uni-icon-chatbubble:before {
+	content: '\e202';
+}
+
+.uni-icon-chatboxes:before {
+	content: '\e203';
+}
+
+.uni-icon-phone-filled:before {
+	content: '\e230';
+}
+
+.uni-icon-email-filled:before {
+	content: '\e231';
+}
+
+.uni-icon-chatbubble-filled:before {
+	content: '\e232';
+}
+
+.uni-icon-chatboxes-filled:before {
+	content: '\e233';
+}
+
+.uni-icon-weibo:before {
+	content: '\e260';
+}
+
+.uni-icon-weixin:before {
+	content: '\e261';
+}
+
+.uni-icon-pengyouquan:before {
+	content: '\e262';
+}
+
+.uni-icon-chat:before {
+	content: '\e263';
+}
+
+.uni-icon-qq:before {
+	content: '\e264';
+}
+
+.uni-icon-videocam:before {
+	content: '\e300';
+}
+
+.uni-icon-camera:before {
+	content: '\e301';
+}
+
+.uni-icon-mic:before {
+	content: '\e302';
+}
+
+.uni-icon-location:before {
+	content: '\e303';
+}
+
+.uni-icon-mic-filled:before,
+.uni-icon-speech:before {
+	content: '\e332';
+}
+
+.uni-icon-location-filled:before {
+	content: '\e333';
+}
+
+.uni-icon-micoff:before {
+	content: '\e360';
+}
+
+.uni-icon-image:before {
+	content: '\e363';
+}
+
+.uni-icon-map:before {
+	content: '\e364';
+}
+
+.uni-icon-compose:before {
+	content: '\e400';
+}
+
+.uni-icon-trash:before {
+	content: '\e401';
+}
+
+.uni-icon-upload:before {
+	content: '\e402';
+}
+
+.uni-icon-download:before {
+	content: '\e403';
+}
+
+.uni-icon-close:before {
+	content: '\e404';
+}
+
+.uni-icon-redo:before {
+	content: '\e405';
+}
+
+.uni-icon-undo:before {
+	content: '\e406';
+}
+
+.uni-icon-refresh:before {
+	content: '\e407';
+}
+
+.uni-icon-star:before {
+	content: '\e408';
+}
+
+.uni-icon-plus:before {
+	content: '\e409';
+}
+
+.uni-icon-minus:before {
+	content: '\e410';
+}
+
+.uni-icon-circle:before,
+.uni-icon-checkbox:before {
+	content: '\e411';
+}
+
+.uni-icon-close-filled:before,
+.uni-icon-clear:before {
+	content: '\e434';
+}
+
+.uni-icon-refresh-filled:before {
+	content: '\e437';
+}
+
+.uni-icon-star-filled:before {
+	content: '\e438';
+}
+
+.uni-icon-plus-filled:before {
+	content: '\e439';
+}
+
+.uni-icon-minus-filled:before {
+	content: '\e440';
+}
+
+.uni-icon-circle-filled:before {
+	content: '\e441';
+}
+
+.uni-icon-checkbox-filled:before {
+	content: '\e442';
+}
+
+.uni-icon-closeempty:before {
+	content: '\e460';
+}
+
+.uni-icon-refreshempty:before {
+	content: '\e461';
+}
+
+.uni-icon-reload:before {
+	content: '\e462';
+}
+
+.uni-icon-starhalf:before {
+	content: '\e463';
+}
+
+.uni-icon-spinner:before {
+	content: '\e464';
+}
+
+.uni-icon-spinner-cycle:before {
+	content: '\e465';
+}
+
+.uni-icon-search:before {
+	content: '\e466';
+}
+
+.uni-icon-plusempty:before {
+	content: '\e468';
+}
+
+.uni-icon-forward:before {
+	content: '\e470';
+}
+
+.uni-icon-back:before,
+.uni-icon-left-nav:before {
+	content: '\e471';
+}
+
+.uni-icon-checkmarkempty:before {
+	content: '\e472';
+}
+
+.uni-icon-home:before {
+	content: '\e500';
+}
+
+.uni-icon-navigate:before {
+	content: '\e501';
+}
+
+.uni-icon-gear:before {
+	content: '\e502';
+}
+
+.uni-icon-paperplane:before {
+	content: '\e503';
+}
+
+.uni-icon-info:before {
+	content: '\e504';
+}
+
+.uni-icon-help:before {
+	content: '\e505';
+}
+
+.uni-icon-locked:before {
+	content: '\e506';
+}
+
+.uni-icon-more:before {
+	content: '\e507';
+}
+
+.uni-icon-flag:before {
+	content: '\e508';
+}
+
+.uni-icon-home-filled:before {
+	content: '\e530';
+}
+
+.uni-icon-gear-filled:before {
+	content: '\e532';
+}
+
+.uni-icon-info-filled:before {
+	content: '\e534';
+}
+
+.uni-icon-help-filled:before {
+	content: '\e535';
+}
+
+.uni-icon-more-filled:before {
+	content: '\e537';
+}
+
+.uni-icon-settings:before {
+	content: '\e560';
+}
+
+.uni-icon-list:before {
+	content: '\e562';
+}
+
+.uni-icon-bars:before {
+	content: '\e563';
+}
+
+.uni-icon-loop:before {
+	content: '\e565';
+}
+
+.uni-icon-paperclip:before {
+	content: '\e567';
+}
+
+.uni-icon-eye:before {
+	content: '\e568';
+}
+
+.uni-icon-arrowup:before {
+	content: '\e580';
+}
+
+.uni-icon-arrowdown:before {
+	content: '\e581';
+}
+
+.uni-icon-arrowleft:before {
+	content: '\e582';
+}
+
+.uni-icon-arrowright:before {
+	content: '\e583';
+}
+
+.uni-icon-arrowthinup:before {
+	content: '\e584';
+}
+
+.uni-icon-arrowthindown:before {
+	content: '\e585';
+}
+
+.uni-icon-arrowthinleft:before {
+	content: '\e586';
+}
+
+.uni-icon-arrowthinright:before {
+	content: '\e587';
+}
+
+.uni-icon-pulldown:before {
+	content: '\e588';
+}
+
+.uni-icon-scan:before {
+    content: "\e612";
+}
\ No newline at end of file
diff --git a/examples/hello-uniapp/components/im-chat/chatinput.vue b/examples/hello-uniapp/components/im-chat/chatinput.vue
index da2be1b49b5ccb685c954ec1ce1d6795be3fefe5..dd87acbcec273c9c35dbc7d4a1bdd7c9809df7d4 100644
--- a/examples/hello-uniapp/components/im-chat/chatinput.vue
+++ b/examples/hello-uniapp/components/im-chat/chatinput.vue
@@ -53,8 +53,6 @@
 </script>
 
 <style>
-	@import "../../common/icon.css";
-
 	.footer {
 		display: flex;
 		flex-direction: row;
diff --git a/examples/hello-uniapp/components/uni-icon.vue b/examples/hello-uniapp/components/uni-icon.vue
index ca0b9b61885a807db58af26bb5417dcb4598d5d5..3fb88d65d5641eb0d6d2b44c7e787d137ed1fa5b 100644
--- a/examples/hello-uniapp/components/uni-icon.vue
+++ b/examples/hello-uniapp/components/uni-icon.vue
@@ -30,7 +30,4 @@
         }
     }
 </script>
-
-<style>
-    @import "../common/icon.css";
-</style>
+
diff --git a/examples/hello-uniapp/components/load-more.vue b/examples/hello-uniapp/components/uni-load-more.vue
similarity index 94%
rename from examples/hello-uniapp/components/load-more.vue
rename to examples/hello-uniapp/components/uni-load-more.vue
index 8fad4010aa5c7ce40abb832afe73770cff147a60..ac3ed7d4820359222a0a499fc77ce8dd361f236d 100644
--- a/examples/hello-uniapp/components/load-more.vue
+++ b/examples/hello-uniapp/components/uni-load-more.vue
@@ -1,192 +1,192 @@
-<template>
-	<view class="load-more">
-		<view class="loading-img" v-show="loadingType === 1 && showImage">
-			<view class="load1">
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-			</view>
-			<view class="load2">
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-			</view>
-			<view class="load3">
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-				<view :style="{background:color}"></view>
-			</view>
-		</view>
-		<text class="loading-text" :style="{color:color}">{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
-	</view>
-</template>
-
-<script>
-	export default {
-		name: "load-more",
-		props: {
-			loadingType: {
-				//上拉的状态：0-loading前；1-loading中；2-没有更多了
-				type: Number,
-				default: 0
-			},
-			showImage: {
-				type: Boolean,
-				default: true
-			},
-			color: {
-				type: String,
-				default: "#777777"
-			},
-			contentText: {
-				type: Object,
-				default () {
-					return {
-						contentdown: "上拉显示更多",
-						contentrefresh: "正在加载...",
-						contentnomore: "没有更多数据了"
-					};
-				}
-			}
-		},
-		data() {
-			return {}
-		}
-	}
-</script>
-
-<style>
-	.load-more {
-		display: flex;
-		flex-direction: row;
-		height: 80upx;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.loading-img {
-		height: 24px;
-		width: 24px;
-		margin-right: 10px;
-	}
-
-	.loading-text {
-		font-size: 28upx;
-		color: #777777;
-	}
-
-	.loading-img>view {
-		position: absolute;
-	}
-
-	.load1,
-	.load2,
-	.load3 {
-		height: 24px;
-		width: 24px;
-	}
-
-	.load2 {
-		transform: rotate(30deg);
-	}
-
-	.load3 {
-		transform: rotate(60deg);
-	}
-
-	.loading-img>view view {
-		width: 6px;
-		height: 2px;
-		border-top-left-radius: 1px;
-		border-bottom-left-radius: 1px;
-		background: #777;
-		position: absolute;
-		opacity: 0.2;
-		transform-origin: 50%;
-		-webkit-animation: load 1.56s ease infinite;
-	}
-
-	.loading-img>view view:nth-child(1) {
-		transform: rotate(90deg);
-		top: 2px;
-		left: 9px;
-	}
-
-	.loading-img>view view:nth-child(2) {
-		-webkit-transform: rotate(180deg);
-		top: 11px;
-		right: 0px;
-	}
-
-	.loading-img>view view:nth-child(3) {
-		transform: rotate(270deg);
-		bottom: 2px;
-		left: 9px;
-	}
-
-	.loading-img>view view:nth-child(4) {
-		top: 11px;
-		left: 0px;
-	}
-
-	.load1 view:nth-child(1) {
-		animation-delay: 0s;
-	}
-
-	.load2 view:nth-child(1) {
-		animation-delay: 0.13s;
-	}
-
-	.load3 view:nth-child(1) {
-		animation-delay: 0.26s;
-	}
-
-	.load1 view:nth-child(2) {
-		animation-delay: 0.39s;
-	}
-
-	.load2 view:nth-child(2) {
-		animation-delay: 0.52s;
-	}
-
-	.load3 view:nth-child(2) {
-		animation-delay: 0.65s;
-	}
-
-	.load1 view:nth-child(3) {
-		animation-delay: 0.78s;
-	}
-
-	.load2 view:nth-child(3) {
-		animation-delay: 0.91s;
-	}
-
-	.load3 view:nth-child(3) {
-		animation-delay: 1.04s;
-	}
-
-	.load1 view:nth-child(4) {
-		animation-delay: 1.17s;
-	}
-
-	.load2 view:nth-child(4) {
-		animation-delay: 1.30s;
-	}
-
-	.load3 view:nth-child(4) {
-		animation-delay: 1.43s;
-	}
-
-	@-webkit-keyframes load {
-		0% {
-			opacity: 1;
-		}
-
-		100% {
-			opacity: 0.2;
-		}
-	}
+<template>
+	<view class="load-more">
+		<view class="loading-img" v-show="loadingType === 1 && showImage">
+			<view class="load1">
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+			</view>
+			<view class="load2">
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+			</view>
+			<view class="load3">
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+				<view :style="{background:color}"></view>
+			</view>
+		</view>
+		<text class="loading-text" :style="{color:color}">{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "load-more",
+		props: {
+			loadingType: {
+				//上拉的状态：0-loading前；1-loading中；2-没有更多了
+				type: Number,
+				default: 0
+			},
+			showImage: {
+				type: Boolean,
+				default: true
+			},
+			color: {
+				type: String,
+				default: "#777777"
+			},
+			contentText: {
+				type: Object,
+				default () {
+					return {
+						contentdown: "上拉显示更多",
+						contentrefresh: "正在加载...",
+						contentnomore: "没有更多数据了"
+					};
+				}
+			}
+		},
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style>
+	.load-more {
+		display: flex;
+		flex-direction: row;
+		height: 80upx;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.loading-img {
+		height: 24px;
+		width: 24px;
+		margin-right: 10px;
+	}
+
+	.loading-text {
+		font-size: 28upx;
+		color: #777777;
+	}
+
+	.loading-img>view {
+		position: absolute;
+	}
+
+	.load1,
+	.load2,
+	.load3 {
+		height: 24px;
+		width: 24px;
+	}
+
+	.load2 {
+		transform: rotate(30deg);
+	}
+
+	.load3 {
+		transform: rotate(60deg);
+	}
+
+	.loading-img>view view {
+		width: 6px;
+		height: 2px;
+		border-top-left-radius: 1px;
+		border-bottom-left-radius: 1px;
+		background: #777;
+		position: absolute;
+		opacity: 0.2;
+		transform-origin: 50%;
+		-webkit-animation: load 1.56s ease infinite;
+	}
+
+	.loading-img>view view:nth-child(1) {
+		transform: rotate(90deg);
+		top: 2px;
+		left: 9px;
+	}
+
+	.loading-img>view view:nth-child(2) {
+		-webkit-transform: rotate(180deg);
+		top: 11px;
+		right: 0px;
+	}
+
+	.loading-img>view view:nth-child(3) {
+		transform: rotate(270deg);
+		bottom: 2px;
+		left: 9px;
+	}
+
+	.loading-img>view view:nth-child(4) {
+		top: 11px;
+		left: 0px;
+	}
+
+	.load1 view:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	.load2 view:nth-child(1) {
+		animation-delay: 0.13s;
+	}
+
+	.load3 view:nth-child(1) {
+		animation-delay: 0.26s;
+	}
+
+	.load1 view:nth-child(2) {
+		animation-delay: 0.39s;
+	}
+
+	.load2 view:nth-child(2) {
+		animation-delay: 0.52s;
+	}
+
+	.load3 view:nth-child(2) {
+		animation-delay: 0.65s;
+	}
+
+	.load1 view:nth-child(3) {
+		animation-delay: 0.78s;
+	}
+
+	.load2 view:nth-child(3) {
+		animation-delay: 0.91s;
+	}
+
+	.load3 view:nth-child(3) {
+		animation-delay: 1.04s;
+	}
+
+	.load1 view:nth-child(4) {
+		animation-delay: 1.17s;
+	}
+
+	.load2 view:nth-child(4) {
+		animation-delay: 1.30s;
+	}
+
+	.load3 view:nth-child(4) {
+		animation-delay: 1.43s;
+	}
+
+	@-webkit-keyframes load {
+		0% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0.2;
+		}
+	}
 </style>
diff --git a/examples/hello-uniapp/pages/component/icon/icon.vue b/examples/hello-uniapp/pages/component/icon/icon.vue
index 886fb30c0045d0ff4e89f63d976e7d519f7f3234..06268a956af04bcbe5c22f4d6a830d360c431df7 100644
--- a/examples/hello-uniapp/pages/component/icon/icon.vue
+++ b/examples/hello-uniapp/pages/component/icon/icon.vue
@@ -120,7 +120,6 @@
 </script>
 
 <style>
-    @import "../../../common/icon.css";
     .icon-item {
         display: inline-flex;
         width: 105upx;
@@ -128,5 +127,4 @@
         margin: 5upx;
         justify-content: center;
     }
-	
 </style>
diff --git a/examples/hello-uniapp/pages/component/input/input.vue b/examples/hello-uniapp/pages/component/input/input.vue
index fa87315377b009fc0bbdd947ed40f5a2bac1b9b2..4b5e5c506f6e4ab55863e67ef6b469bc8f6656e6 100644
--- a/examples/hello-uniapp/pages/component/input/input.vue
+++ b/examples/hello-uniapp/pages/component/input/input.vue
@@ -113,6 +113,5 @@
 </script>
 
 <style>
-	@import "../../../common/icon.css";
 	.title{padding:10upx 25upx;}
 </style>
diff --git a/examples/hello-uniapp/pages/template/load-more/load-more.vue b/examples/hello-uniapp/pages/template/load-more/load-more.vue
index 5efc1580063f21d361c97c2ebf377954e8dd6bde..201680a5f37f7d0f446cfd417d8631de644df2aa 100644
--- a/examples/hello-uniapp/pages/template/load-more/load-more.vue
+++ b/examples/hello-uniapp/pages/template/load-more/load-more.vue
@@ -3,25 +3,25 @@
 		<page-head :title="title"></page-head>
 		<view class="uni-padding-wrap">
 			<view class="uni-helllo-text">
-				这是load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。
+				这是uni-load-more组件使用示例，配置loadingType改变组件状态，配置contentText改变文字内容，配置showImage改变loading时是否显示loading图标，配置color改变文字和loading图标颜色。
 			</view>
 			<view class="uni-title">在列表中使用</view>
 			<view>
 				<view class="list-view">
 					<view class="list-item" v-for="(value,index) in list" :key="index">list - {{value}}</view>
 				</view>
-				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
+				<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
 			</view>
 		</view>
 	</view>
 </template>
 <script>
-	import loadMore from '../../../components/load-more.vue'
+	import uniLoadMore from '../../../components/uni-load-more.vue'
 
 	export default {
 		data() {
 			return {
-				title: 'load-more',
+				title: 'uni-load-more',
 				list: [],
 				loadingType: 0,
 				contentText: {
@@ -59,7 +59,7 @@
 			}, 800);
 		},
 		components: {
-			loadMore
+			uniLoadMore
 		}
 	}
 </script>
diff --git a/examples/hello-uniapp/pages/template/qrcode/qrcode.vue b/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
index 543bcaf457feff913efc4f63fe39386958eddc4c..7fbff2973dc1261c4cbbb7998268d1f82ca38da5 100644
--- a/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
+++ b/examples/hello-uniapp/pages/template/qrcode/qrcode.vue
@@ -71,6 +71,3 @@
 	}
 </script>
 
-<style>
-	@import "../../../common/icon.css";
-</style>
diff --git a/examples/hello-uniapp/pages/template/sbanner/sbanner.vue b/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
index 23096ae1ac2e63d6facf4f1c85b8fd559fabb581..c59b19f5c564685b58d242abf37225c875a77f6e 100755
--- a/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
+++ b/examples/hello-uniapp/pages/template/sbanner/sbanner.vue
@@ -48,7 +48,6 @@
 </script>
 
 <style>
-	@import "../../../common/icon.css";
     /* 遮罩层 */
     .uni-mask {
         background: rgba(0, 0, 0, 0.6);
diff --git a/examples/hello-uniapp/pages/template/tabbar/tabbar.vue b/examples/hello-uniapp/pages/template/tabbar/tabbar.vue
index 79787cff7a12059476d10a0258c4f44888689922..5c8ef7a09f2bef32ed27f81bd540e86ab396543f 100644
--- a/examples/hello-uniapp/pages/template/tabbar/tabbar.vue
+++ b/examples/hello-uniapp/pages/template/tabbar/tabbar.vue
@@ -11,7 +11,7 @@
                         <media-list :data="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
                     </block>
 					<view class="uni-tab-bar-loading">
-						<load-more :loadingType="tab.loadingType" :contentText="loadingText"></load-more>
+						<uni-load-more :loadingType="tab.loadingType" :contentText="loadingText"></uni-load-more>
 					</view>
                 </scroll-view>
             </swiper-item>
@@ -20,11 +20,11 @@
 </template>
 <script>
     import mediaList from '@/components/tab-nvue/mediaList.vue';
-	import loadMore from '@/components/load-more.vue';
+	import uniLoadMore from '@/components/uni-load-more.vue';
     export default {
         components: {
             mediaList,
-			loadMore
+			uniLoadMore
         },
         data() {
             return {
diff --git a/examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue b/examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
index 79787cff7a12059476d10a0258c4f44888689922..5c8ef7a09f2bef32ed27f81bd540e86ab396543f 100644
--- a/examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
+++ b/examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
@@ -11,7 +11,7 @@
                         <media-list :data="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
                     </block>
 					<view class="uni-tab-bar-loading">
-						<load-more :loadingType="tab.loadingType" :contentText="loadingText"></load-more>
+						<uni-load-more :loadingType="tab.loadingType" :contentText="loadingText"></uni-load-more>
 					</view>
                 </scroll-view>
             </swiper-item>
@@ -20,11 +20,11 @@
 </template>
 <script>
     import mediaList from '@/components/tab-nvue/mediaList.vue';
-	import loadMore from '@/components/load-more.vue';
+	import uniLoadMore from '@/components/uni-load-more.vue';
     export default {
         components: {
             mediaList,
-			loadMore
+			uniLoadMore
         },
         data() {
             return {