feat(icon): support theme

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

@@ -7,12 +7,20 @@
 </n-icon>
 <n-icon
   size="40"
+  color="rgb(255, 0, 0)"
 >
   <md-contacts/>
 </n-icon>
 <n-icon
   size="40"
-  color="red"
+  :themed-style="{
+    dark: {
+      fill: 'yellow'
+    },
+    light: {
+      fill: 'red'
+    }
+  }"
 >
   <md-cash />
 </n-icon>

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

@@ -2,9 +2,10 @@
 ```component
 icons
 ```
-
-<icons />
-
+## Demos
 ```demo
 basic
-```
+```
+## Search Icons
+<icons />
+

packages/common/Button/src/main.vue

@@ -32,7 +32,6 @@
         <n-spin
           v-if="loading"
           :stroke="simulateHollowOut ? ascendantBackgroundColor : null"
-          :size="null"
           :stroke-width="4"
         />
         <n-icon

packages/common/GradientText/src/main.vue

@@ -6,6 +6,7 @@
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
     :style="{
+      ...synthesizedStyle,
       fontSize: styleFontSize,
       backgroundImage: styleBackgroundImage
     }"

packages/common/Icon/src/main.vue

@@ -1,6 +1,10 @@
 <script>
+import withapp from '../../../mixins/withapp'
+import themeable from '../../../mixins/themeable'
+
 export default {
   name: 'NIcon',
+  mixins: [ withapp, themeable ],
   props: {
     size: {
       type: [Number, String],
@@ -28,7 +32,10 @@ export default {
     else {
       return h('i', {
         staticClass: 'n-icon',
-        style: this.styles,
+        style: {
+          ...this.styles,
+          ...this.synthesizedStyle
+        },
         on: this.$listeners
       }, this.$slots.default)
     }

packages/mixins/hollowoutable.js

@@ -5,6 +5,7 @@ export default {
     synthesizedTheme (value) {
       if (this.avoidHollowOut) return
       this.$nextTick().then(() => {
+        console.log('update style')
         this.updateHollowOutStyle(value)
       })
     }

styles/Button.scss

@@ -91,7 +91,7 @@
         }
       }
       @include e(icon) {
-        path {
+        @include b(icon) {
           fill: map-get($map: $ghost-button-color, $key: $type) !important;
         }
         circle {
@@ -101,7 +101,7 @@
     }
     @if $type == 'default' {
       @include e(icon) {
-        path {
+        @include b(icon) {
           fill: map-get($map: $ghost-button-color, $key: $type) !important;
         }
         circle {
@@ -191,11 +191,6 @@
       @include e(icon) {
         @include fade-in-width-expand-transition();
         transition: color .3s $default-cubic-bezier;
-        @include b(icon) {
-          path {
-            transition: fill .3s $default-cubic-bezier;
-          }
-        }
       }
       @include e(content-aligner) {
         display: inline-block;

styles/Icon.scss

@@ -1,8 +1,11 @@
-.n-icon {
+@import './mixins/mixins.scss';
+
+@include b(icon) {
   height: 1em;
   width: 1em;
   line-height: 1em;
   text-align: center;
   display: inline-block;
   position: relative;
+  transition: fill .3s $default-cubic-bezier;
 }