[new feature] NoticeBar: support use inner icon (#2305)

packages/notice-bar/demo/index.vue

@@ -3,7 +3,7 @@
     <demo-block :title="$t('basicUsage')">
       <van-notice-bar
         :text="$t('text')"
-        left-icon="//img.yzcdn.cn/vant/volume.png"
+        left-icon="volume-o"
       />
     </demo-block>
 

packages/notice-bar/en-US.md

@@ -14,7 +14,7 @@ Vue.use(NoticeBar);
 ```html
 <van-notice-bar
   text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
-  left-icon="//img.yzcdn.cn/vant/volume.png"
+  left-icon="volume-o"
 />
 ```
 
@@ -46,11 +46,10 @@ Vue.use(NoticeBar);
 | delay | Animation delay (s) | `Number` | `1` |
 | speed | Scroll speed (px/s) | `Number` | `50` |
 | scrollable | Whether to scroll content | `Boolean` | `true` |
-| left-icon | Image url of left icon | `String` | - |
+| left-icon | Left Icon | `String` | - |
 | color | Text color | `String` | `#f60` |
 | background | Background color | `String` | `#fff7cc` |
 
-
 ### Event
 
 | Event | Description | Arguments |

packages/notice-bar/index.less

@@ -17,21 +17,16 @@
   }
 
   &__left-icon {
-    height: 18px;
+    font-size: 16px;
     min-width: 20px;
-    box-sizing: border-box;
-
-    img {
-      width: 16px;
-      height: 16px;
-    }
   }
 
   &__right-icon {
-    top: 12px;
+    top: 50%;
     right: 15px;
     font-size: 16px;
     position: absolute;
+    margin-top: -0.5em;
   }
 
   &__wrap {

packages/notice-bar/index.vue

@@ -5,12 +5,11 @@
     :style="barStyle"
     @click="$emit('click')"
   >
-    <div
+    <icon
       v-if="leftIcon"
       :class="b('left-icon')"
-    >
+      :name="leftIcon"
-      <img :src="leftIcon">
+    />
-    </div>
     <div
       ref="wrap"
       :class="b('wrap')"
@@ -73,7 +72,7 @@ export default create({
 
   computed: {
     iconName() {
-      return this.mode === 'closeable' ? 'close' : this.mode === 'link' ? 'arrow' : '';
+      return this.mode === 'closeable' ? 'cross' : this.mode === 'link' ? 'arrow' : '';
     },
 
     barStyle() {

packages/notice-bar/test/__snapshots__/demo.spec.js.snap

@@ -3,8 +3,9 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-notice-bar" style="color:undefined;background:undefined;">
+    <div class="van-notice-bar" style="color:undefined;background:undefined;"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon" style="color:undefined;font-size:undefined;">
-      <div class="van-notice-bar__left-icon"><img src="//img.yzcdn.cn/vant/volume.png"></div>
+        <!---->
+        <!----></i>
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
@@ -25,7 +26,7 @@ exports[`renders demo correctly 1`] = `
       <!---->
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
-      </div> <i class="van-icon van-icon-close van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
+      </div> <i class="van-icon van-icon-cross van-notice-bar__right-icon" style="color:undefined;font-size:undefined;">
         <!---->
         <!----></i>
     </div>

packages/notice-bar/zh-CN.md

@@ -14,7 +14,7 @@ Vue.use(NoticeBar);
 ```html
 <van-notice-bar
   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-  left-icon="//img.yzcdn.cn/vant/volume.png"
+  left-icon="volume-o"
 />
 ```
 
@@ -50,7 +50,7 @@ Vue.use(NoticeBar);
 | delay | 动画延迟时间 (s) | `Number` | `1` | - |
 | speed | 滚动速率 (px/s) | `Number` | `50` | - |
 | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | - |
-| left-icon | 左侧图标图片 URL | `String` | - | - |
+| left-icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
 | color | 文本颜色 | `String` | `#f60` | - |
 | background | 滚动条背景 | `String` | `#fff7cc` | - |