Message: refactor icon

examples/docs/en-US/message.md

@@ -75,7 +75,7 @@ Used to show feedback after an activity. The difference with Notification is tha
 
 Displays at the top, and disappears after 3 seconds.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
 
 ```html
 <template>
@@ -214,6 +214,10 @@ import { Message } from 'element-ui';
 In this case you should call `Message(options)`. We have also registered methods for different types, e.g. `Message.success(options)`.
 You can call `Message.closeAll()` to manually close all the instances.
 
+:::warning
+Although `message` property supports HTML strings, dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.
+:::
+
 ### Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/zh-CN/message.md

@@ -75,7 +75,7 @@
 
 从顶部出现，3 秒后自动消失。
 
-:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。
+:::demo Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个`$message`方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。
 
 ```html
 <template>
@@ -214,6 +214,10 @@ import { Message } from 'element-ui';
 此时调用方法为 `Message(options)`。我们也为每个 type 定义了各自的方法，如 `Message.success(options)`。
 并且可以调用 `Message.closeAll()` 手动关闭所有实例。
 
+:::warning
+`message` 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。
+:::
+
 ### Options
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/icon.json

@@ -1 +1 @@
-["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]
+["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain"]

packages/message/src/main.vue

@@ -6,9 +6,14 @@
       v-show="visible"
       @mouseenter="clearTimer"
       @mouseleave="startTimer">
-      <img class="el-message__img" :src="typeImg" alt="" v-if="!iconClass">
-      <div class="el-message__group" :class="{ 'is-with-icon': iconClass }">
-        <slot><p><i class="el-message__icon" :class="iconClass" v-if="iconClass"></i>{{ message }}</p></slot>
+      <div :class="iconWrapClass">
+        <i :class="iconClass" v-if="iconClass"></i>
+        <i :class="typeClass" v-else></i>
+      </div>
+      <div class="el-message__group">
+        <slot>
+          <p v-html="message"></p>
+        </slot>
         <div v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"></div>
       </div>
     </div>
@@ -16,6 +21,13 @@
 </template>
 
 <script type="text/babel">
+  const typeMap = {
+    success: 'circle-check',
+    info: 'information',
+    warning: 'warning',
+    error: 'circle-cross'
+  };
+
   export default {
     data() {
       return {
@@ -33,8 +45,18 @@
     },
 
     computed: {
-      typeImg() {
-        return require(`../assets/${ this.type }.svg`);
+      iconWrapClass() {
+        const classes = ['el-message__icon'];
+        if (this.type && !this.iconClass) {
+          classes.push(`el-message__icon--${ this.type }`);
+        }
+        return classes;
+      },
+
+      typeClass() {
+        return this.type && !this.iconClass
+          ? `el-message__type el-icon-${ typeMap[this.type] }-plain`
+          : '';
       }
     },
 

packages/theme-default/src/icon.css

@@ -1,7 +1,7 @@
 @font-face {
     font-family: 'element-icons';
-    src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
-      url('fonts/element-icons.ttf?t=1472440741') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    src: url('fonts/element-icons.woff?t=1501582787037') format('woff'), /* chrome, firefox */
+      url('fonts/element-icons.ttf?t=1501582787037') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
     font-weight: normal;
     font-style: normal;
 }
@@ -62,6 +62,10 @@
 .el-icon-delete2:before { content: "\e624"; }
 .el-icon-upload2:before { content: "\e627"; }
 .el-icon-view:before { content: "\e626"; }
+.el-icon-circle-check-plain:before { content: "\e625"; }
+.el-icon-circle-cross-plain:before { content: "\e628"; }
+.el-icon-information-plain:before { content: "\e629"; }
+.el-icon-warning-plain:before { content: "\e62a"; }
 
 .el-icon-loading {
   animation: rotating 1s linear infinite;

packages/theme-default/src/message.css

@@ -6,7 +6,6 @@
   @b message {
     box-shadow: var(--message-shadow);
     min-width: var(--message-min-width);
-    padding: var(--message-padding);
     box-sizing: border-box;
     border-radius: var(--border-radius-small);
     position: fixed;
@@ -18,16 +17,13 @@
     overflow: hidden;
 
     @e group {
-      margin-left: 38px;
+      margin-left: 40px;
       position: relative;
       height: 20px;
       line-height: 20px;
       display: flex;
       align-items: center;
-
-      @when with-icon {
-        margin-left: 0;
-      }
+      padding: var(--message-padding);
 
       & p {
         font-size: var(--font-size-base);
@@ -38,20 +34,39 @@
       }
     }
 
-    @e img {
-      size: 40px;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-
     @e icon {
-      vertical-align: middle;
-      margin-right: 8px;
+      size: 40px;
+      display: inline-block;
+      float: left;
+      text-align: center;
+
+      i {
+        line-height: 40px;
+
+        &.el-message__type {
+          color: var(--color-white);
+        }
+      }
+
+      @modifier info {
+        background-color: var(--color-info);
+      }
+
+      @modifier warning {
+        background-color: var(--color-warning);
+      }
+
+      @modifier error {
+        background-color: var(--color-danger);
+      }
+
+      @modifier success {
+        background-color: var(--color-success);
+      }
     }
 
     @e closeBtn {
-      position: absolute 3px 0 * *;
+      position: absolute 13px 12px * *;
       cursor: pointer;
       color: var(--message-close-color);
       font-size: var(--font-size-base);

test/unit/specs/message.spec.js

@@ -41,6 +41,18 @@ describe('Message', () => {
     }, 500);
   });
 
+  it('custom icon', done => {
+    Message({
+      message: '夏天',
+      iconClass: 'el-icon-close'
+    });
+    setTimeout(() => {
+      const icon = document.querySelector('.el-message__icon i');
+      expect(icon.classList.contains('el-icon-close')).to.true;
+      done();
+    }, 500);
+  });
+
   it('close all', done => {
     Message({
       message: '夏天',