last of type bugs

examples/app.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import JsonViewer from '../';
+import './css/ionicons.css';
 
 new Vue({
     el: '#app',
@@ -17,7 +18,7 @@ new Vue({
                 }
             },
             showCopy: true,
-            iconPrefix: 'ive-'
+            iconPrefix: 'ion'
         }
     })
 })

json-box.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="node">
         <span class="key" v-if="keyName">
-            <j-icon v-if="isObject" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggleNode"></j-icon>
+            <j-icon v-if="isObject" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggleNode"></j-icon>
             {{keyName}}:
         </span>
         <commponent :is="`Json${valueType}`" :json-value="value" v-model="toggle" :key-name="keyName"></commponent>
@@ -71,15 +71,14 @@ export default {
     &:after {
         content: ','
     }
-    &:last-child {
+    &:last-of-type {
         &:after {
             content: ''
         }
     }
-    .icon {
+    .j-icon {
         position: absolute;
         left: -12px;
-        font-size: 12px;
         top: 3px;
         color: #80848f;
         cursor: pointer;

json-icon.vue

@@ -1,7 +1,7 @@
 <template>
-    <i :class="{
-        [`${iconPrefix}icon`]: true,
-        [`${iconPrefix}${type}`]: true
+    <i class="j-icon" :class="{
+        [`${iconPrefix}`]: true,
+        [`${iconPrefix}-${type}`]: true
     }" @click="iconClick"></i>
 </template>
 

json-viewer.vue

@@ -1,15 +1,15 @@
 <template>
     <div class="json-viewer">
         <div class="tooltip">
-            <j-icon v-if="showBigger" type="ion-qr-scanner" @click="bigger"></j-icon>
-            <j-icon v-if="copied" class="copied" type="ion-checkmark"></j-icon>
-            <j-icon v-if="showCopy && !copied" class="copy" type="ion-md-clipboard" @click="clip"></j-icon>
+            <j-icon v-if="showBigger" type="qr-scanner" @click="bigger"></j-icon>
+            <j-icon v-if="copied" class="copied" type="checkmark"></j-icon>
+            <j-icon v-if="showCopy && !copied" class="copy" type="clipboard" @click="clip"></j-icon>
         </div>
         <div class="code-box" :class="{'more': moreCode}">
             <json-box :value="value" :key-name="keyName"></json-box>
         </div>
         <div class="more-code" @click="toggleMoreCode">
-            <j-icon :type="moreCode ? 'ion-ios-arrow-up' : 'ion-ios-arrow-down'"></j-icon>
+            <j-icon :type="moreCode ? 'ios-arrow-up' : 'ios-arrow-down'"></j-icon>
         </div>
     </div>
 </template>
@@ -42,7 +42,7 @@ export default {
     },
     provide() {
         return {
-            iconPrefix: this.iconPrefix
+            iconPrefix: this.iconPrefix || 'ion'
         }
     },
     data() {
@@ -113,7 +113,7 @@ export default {
         text-align: center;
         cursor: pointer;
 
-        .icon {
+        .j-icon {
             position: relative;
             z-index: 2;
         }
@@ -134,7 +134,6 @@ export default {
         position: absolute;
         right: 12px;
         top: 5px;
-        font-size: 18px;
         color: #b2b2b2;
         cursor: pointer;
 
@@ -142,9 +141,14 @@ export default {
             color: #19be6b;
         }
 
-        .icon {
+        .j-icon {
             margin-left: 5px;
+            font-size: 18px;
         }
     }
+    
+    .j-icon {
+        font-size: 12px;
+    }
 }
 </style>

types/json-array.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <j-icon v-if="!keyName" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggle"></j-icon>
+        <j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
         <span>[</span>
         <template v-if="jsonValue.length">
             <json-box v-show="value" v-for="(val, index) in jsonValue" :key="index" :value="val"></json-box>

types/json-object.vue

@@ -1,6 +1,6 @@
 <template>
     <span>
-        <j-icon v-if="!keyName" :type="value ? 'ion-arrow-down-b' : 'ion-arrow-up-b'" @click.stop="toggle"></j-icon>
+        <j-icon v-if="!keyName" :type="value ? 'arrow-down-b' : 'arrow-up-b'" @click.stop="toggle"></j-icon>
         <span>{</span>
         <template v-if="Object.keys(jsonValue).length">
             <json-box v-show="value" v-for="(v, k) in jsonValue" :key="k" :key-name="k" :value="v"></json-box>