refactor(icon): add depth prop

demo/documentation/components/icon/enUS/index.md

@@ -16,6 +16,7 @@ custom-icon
 |themed-style|`object`|`null`||
 |size|`number`|`null`||
 |color|`object`|`null`||
+|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
 
 ## Slots
 |Name|Parameters|Description|

demo/documentation/components/icon/zhCN/index.md

@@ -17,6 +17,8 @@ custom-icon
 |themed-style|`object`|`null`||
 |size|`number`|`null`||
 |color|`object`|`null`||
+|depth|`'primary' \| 'secondary' \| 'tertiary'`|`'secondary'`||
+
 
 ## Slots
 |名称|参数|说明|

src/Icon/src/main.vue

@@ -1,6 +1,7 @@
 <script>
 import withapp from '../../_mixins/withapp'
 import themeable from '../../_mixins/themeable'
+import formatLength from '../../_utils/css/formatLength'
 
 export default {
   name: 'NIcon',
@@ -10,17 +11,11 @@ export default {
       type: [Number, String],
       default: null
     },
-    primary: {
-      type: Boolean,
-      default: false
-    },
-    secondary: {
-      type: Boolean,
-      default: false
-    },
-    tertiary: {
-      type: Boolean,
-      default: false
+    depth: {
+      validator (value) {
+        return ['primary', 'secondary', 'tertiary'].includes(value)
+      },
+      default: 'secondary'
     },
     color: {
       type: String,
@@ -31,10 +26,11 @@ export default {
     styles () {
       let style = {}
       if (this.size) {
-        style['font-size'] = `${this.size}px`
+        style['font-size'] = formatLength(this.size)
       }
       if (this.color) {
         style.fill = this.color
+        style.stroke = this.color
       }
       return style
     }
@@ -46,15 +42,13 @@ export default {
         staticClass: 'n-icon',
         class: {
           [`n-${this.syntheticTheme}-theme`]: this.syntheticTheme,
-          'n-icon--primary': this.primary,
-          'n-icon--secondary': this.secondary,
-          'n-icon--tertiary': this.tertiary
+          [`n-icon--${this.depth}-depth`]: this.depth
         },
         style: {
           ...this.styles,
           ...this.syntheticStyle
         },
-        on: this.$listeners
+        on: Object.assign({}, this.$listeners)
       }, this.$slots.default)
     }
   }

src/_utils/css/formatLength.js

@@ -1,4 +1,5 @@
 export default function formatLength (length) {
   if (typeof length === 'number') return '' + (length && length + 'px')
+  if (typeof length === 'string' && /^\d+$/.test(length)) return length + 'px'
   return length
 }

styles/Icon.scss

@@ -13,15 +13,15 @@
       height: 1em;
       width: 1em;
     }
-    @include m(primary) {
+    @include m(primary-depth) {
       fill: $--n-text-color;
       stroke: $--n-text-color;
     }
-    @include m(secondary) {
+    @include m(secondary-depth) {
       fill: $--n-secondary-text-color;
       stroke: $--n-secondary-text-color;
     }
-    @include m(tertiary) {
+    @include m(tertiary-depth) {
       fill: $--n-meta-text-color;
       stroke: $--n-meta-text-color;
     }