icon use svg

README.md

@@ -2,9 +2,8 @@
 
 Simple JSON viewer component, for Vue.js 2
 
-[![Build Status](https://travis-ci.org/chenfengjw163/vue-json-viewer.svg?branch=master)](https://travis-ci.org/chenfengjw163/vue-json-viewer)
-
-
+[![Travis](https://img.shields.io/travis/chenfengjw163/vue-json-viewer/master.svg?style=flat-square)](https://travis-ci.org/chenfengjw163/vue-json-viewer)
+[![npm](https://img.shields.io/npm/v/vue-json-viewer.svg?style=flat-square)](https://www.npmjs.com/package/vue-json-viewer)
 
 - [Installing](#installing)
 - [Example](#example)

lib/icon.svg

@@ -0,0 +1,5 @@
+<svg height="16" width="8" xmlns="http://www.w3.org/2000/svg">
+ 
+<polygon points="0,0 8,8 0,16"
+style="fill:#666;stroke:purple;stroke-width:0" />
+</svg>

lib/json-viewer.vue

@@ -225,25 +225,19 @@ export default {
   }
 
   .jv-toggle {
+    background-image: url(./icon.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center center;
     cursor: pointer;
-
-    &:before {
-      content: "⏷";
-      padding: 0px 2px;
-      border-radius: 2px;
-      position: absolute;
-    }
-    &:after {
-      content: " ";
-      position: relative;
-      display: inline-block;
-      width: 16px;
-    }
+    width: 10px;
+    height: 10px;
+    margin-right: 2px;
+    display: inline-block;
+    transition: transform 0.1s;
 
     &.open {
-      &:before {
-        content: "⏶";
-      }
+      transform: rotate(90deg)
     }
   }
 
@@ -264,6 +258,7 @@ export default {
       z-index: 2;
       color: #888;
       transition: all 0.1s;
+      transform: rotate(-90deg)
       // background: red;
     }
 
@@ -278,14 +273,14 @@ export default {
       background: linear-gradient(
         to bottom,
         rgba(0, 0, 0, 0) 20%,
-        rgba(230, 230, 230, 1) 100%
+        rgba(230, 230, 230, 0.3) 100%
       );
       transition: all 0.1s;
     }
 
     &:hover {
       .jv-toggle {
-        top: 50%;
+        top: 50%; 
         color: #111;
       }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "vuejs展示json的组件",
   "main": "dist/vue-json-viewer.js",
   "files": [

yarn.lock

@@ -5744,6 +5744,13 @@ vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
+vue-json-viewer@^2.0.5:
+  version "2.0.5"
+  resolved "http://registry.npm.taobao.org/vue-json-viewer/download/vue-json-viewer-2.0.5.tgz#2e119f74fd54d46c3f8976c327943b58e968f9b3"
+  dependencies:
+    clipboard "^1.7.1"
+    vue "^2.5.2"
+
 vue-loader@^13.3.0:
   version "13.7.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"