DevCloudFE · kagol · Apr 8, 2022 · Apr 8, 2022
diff --git a/packages/devui-vue/devui/notification/src/notification-icons.tsx b/packages/devui-vue/devui/notification/src/notification-icons.tsx
@@ -0,0 +1,92 @@
+export function SuccessIcon(): JSX.Element {
+  return (
+    <svg
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <polygon
+          id="path-s"
+          points="6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 \
+           6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"></polygon>
+      </defs>
+      <g id="correct" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+          <use xlink:href="#path-s"></use>
+        </mask>
+        <use id="Mask" class="devui-notification-image-success-path" xlink:href="#path-s"></use>
+      </g>
+    </svg>
+  );
+}
+
+export function WarningIcon(): JSX.Element {
+  return (
+    <svg
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path
+          class="devui-icon-warning-outer"
+          d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 \
+           15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 \
+           0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"></path>
+        <path
+          class="devui-icon-warning-inner"
+          stroke-width="0.3"
+          fill-rule="nonzero"
+          d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 \
+           L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"></path>
+      </g>
+    </svg>
+  );
+}
+
+export function InfoIcon(): JSX.Element {
+  return (
+    <svg
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <g id="info" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path class="devui-notification-image-info-path" d="M7,13 L7,6 L9,6 L9,13 L7,13 Z M7,5 L7,3 L9,3 L9,5 L7,5 Z" id="info"></path>
+      </g>
+    </svg>
+  );
+}
+
+export function ErrorIcon(): JSX.Element {
+  return (
+    <svg
+      width="16px"
+      height="16px"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <polygon
+          id="path-e"
+          points="8.07106781 6.65685425 10.8994949 3.82842712 12.3137085 5.24264069 9.48528137 8.07106781 12.3137085 \
+           10.8994949 10.8994949 12.3137085 8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425 \
+           8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"></polygon>
+      </defs>
+      <g id="error" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+          <use xlink:href="#path-e"></use>
+        </mask>
+        <use id="Mask" class="devui-notification-image-error-path" xlink:href="#path-e"></use>
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/devui-vue/devui/notification/src/notification-image.tsx b/packages/devui-vue/devui/notification/src/notification-image.tsx
@@ -1,7 +1,7 @@
 import { computed, defineComponent, toRefs } from 'vue';
 import type { PropType } from 'vue';
 import { NotificationType } from './notification-types';
-import { Icon } from '../../icon';
+import { SuccessIcon, WarningIcon, InfoIcon, ErrorIcon } from './notification-icons';
 
 export default defineComponent({
   props: {
@@ -16,13 +16,16 @@ export default defineComponent({
       'devui-notification-image': true,
       [`devui-notification-image-${type.value}`]: true,
     }));
-    const severityIconMap = {
-      info: 'info-o',
-      success: 'right-o',
-      warning: 'warning-o',
-      error: 'error-o',
-    };
 
-    return () => <span class={classes.value}>{type.value !== 'normal' && <Icon name={severityIconMap[type.value]} size='16px' />}</span>;
+    return () => (
+      <span class={classes.value}>
+        {type.value &&
+          type.value !== 'normal' &&
+          ((type.value === 'success' && <SuccessIcon />) ||
+            (type.value === 'info' && <InfoIcon />) ||
+            (type.value === 'warning' && <WarningIcon />) ||
+            (type.value === 'error' && <ErrorIcon />))}
+      </span>
+    );
   },
 });
diff --git a/packages/devui-vue/devui/notification/src/notification.scss b/packages/devui-vue/devui/notification/src/notification.scss
@@ -68,20 +68,27 @@
   padding: 0;
   line-height: 1;
 
-  &.devui-notification-image-warn i.icon {
-    color: $devui-warning !important;
+  &.devui-notification-image-warning {
+    path.devui-icon-warning-outer {
+      fill: $devui-warning-line;
+    }
+
+    path.devui-icon-warning-inner {
+      fill: $devui-light-text;
+      stroke: $devui-light-text;
+    }
   }
 
-  &.devui-notification-image-info i.icon {
-    color: $devui-info !important;
+  &.devui-notification-image-info {
+    background-color: $devui-info;
   }
 
-  &.devui-notification-image-error i.icon {
-    color: $devui-danger !important;
+  &.devui-notification-image-error {
+    background-color: $devui-danger;
   }
 
-  &.devui-notification-image-success i.icon {
-    color: $devui-success !important;
+  &.devui-notification-image-success {
+    background-color: $devui-success;
   }
 
   .devui-notification-image-info-path,

diff --git a/packages/devui-vue/docs/components/notification/index.md b/packages/devui-vue/docs/components/notification/index.md
@@ -196,8 +196,8 @@ this.$notificationService.open({ xxx });
 
 ### d-notification 参数
 
-| 参数     | 类型               | 默认     | 说明                       | 跳转                          |
-| -------- | ------------------ | -------- | -------------------------- | ----------------------------- |
+| 参数名   | 类型               | 默认     | 说明                       | 跳转                          |
+| :------- | :----------------- | :------- | :------------------------- | :---------------------------- |
 | v-model  | `boolean`          | 'false'  | 组件调用必选，控制是否显示 | [组件方式调用](#组件方式调用) |
 | content  | `string`           | ''       | 可选，设置消息内容         | [基本用法](#基本用法)         |
 | title    | `string`           | ''       | 可选，设置消息标题         | [消息标题](#消息标题)         |
@@ -207,6 +207,14 @@ this.$notificationService.open({ xxx });
 
 ### d-notification 插槽
 
-| 名称    | 说明                         |
-| ------- | ---------------------------- |
+| 插槽名  | 说明                         |
+| :------ | :--------------------------- |
 | default | 默认插槽，组件方式使用时有效 |
+
+### 类型定义
+
+#### NotificationType
+
+```ts
+type NotificationType = 'normal' | 'success' | 'error' | 'warning' | 'info';
+```