bug fix

docs/.vuepress/components/lv-icon.vue

@@ -30,7 +30,10 @@ export default {
     },
     watch: {
         fontSize(newSize) {
-            this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
+            if (newSize) this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
+        },
+        color(newColor) {
+            if (newColor) this.$set(this.styleObject, 'color', this.color);
         }
     },
     mounted() {

docs/components/README.md

@@ -65,13 +65,18 @@
 
 <lv-button @click="small">变小</lv-button>
 <lv-button @click="big">变大</lv-button>
+<lv-button @click="setRed">变红</lv-button>
+<lv-button @click="setYellow">变黄</lv-button>
+<lv-button @click="setBlue">变蓝</lv-button>
+<lv-button @click="setGreen">变绿</lv-button>
+<lv-button @click="setOrigin">还原</lv-button>
 
 ----
 
-<lv-icon type="add" :fontSize="fontSize"></lv-icon>
-<lv-icon type="wechat" :fontSize="fontSize"></lv-icon>
-<lv-icon type="friend" :fontSize="fontSize"></lv-icon>
-<lv-icon type="addRound" :fontSize="fontSize"></lv-icon>
+<lv-icon type="add" :fontSize="fontSize" :color="fontColor"></lv-icon>
+<lv-icon type="wechat" :fontSize="fontSize" :color="fontColor"></lv-icon>
+<lv-icon type="friend" :fontSize="fontSize" :color="fontColor"></lv-icon>
+<lv-icon type="addRound" :fontSize="fontSize" :color="fontColor"></lv-icon>
 
 ```vue
 <lv-icon type="add" fontSize="60"></lv-icon>
@@ -114,6 +119,7 @@
         data () {
             return {
                 fontSize: 60,
+                fontColor: '#333',
                 showDefaultDialog: false,
             }
         },
@@ -123,6 +129,22 @@
             },
             big () {
                 this.fontSize = this.fontSize + 10;
+            },
+            setRed () {
+                this.fontColor = 'red';
+            },
+            setYellow () {
+                this.fontColor = 'yellow';
+            },
+            setBlue () {
+                this.fontColor = 'blue';
+            },
+            setGreen () {
+                this.fontColor = 'green';
+            },
+            setOrigin () {
+                this.fontSize = 60;
+                this.fontColor = '#000';
             }
         }
     }

src/components/lib/lv-icon.vue

@@ -1,10 +1,15 @@
 <template>
-    <i class="iconfont" :class="[type ? 'icon-' + type : '']" :style="[fontSize ? `font-size:${fontSize}${fontUnit}` : '', color ? `color:${color}` : '']"></i>
+    <i class="iconfont" :class="[type ? 'icon-' + type : '']" :style="styleObject"></i>
 </template>
 
 <script function>
 export default {
     name: 'lv-icon',
+    data () {
+        return {
+            styleObject: {}
+        }
+    },
     props: {
         type: {
             type: String,
@@ -26,6 +31,9 @@ export default {
     watch: {
         fontSize(newSize) {
             if (newSize) this.$set(this.styleObject, 'font-size', this.fontSize + this.fontUnit);
+        },
+        color(newColor) {
+            if (newColor) this.$set(this.styleObject, 'color', this.color);
         }
     },
     mounted() {