Use SVG for icons

gulpfile.js

@@ -11,7 +11,7 @@ var uglify = require('uglify-js');
 var NAME    = 'jsoneditor';
 var ENTRY   = './src/js/JSONEditor.js';
 var HEADER  = './src/js/header.js';
-var IMAGE   = './src/css/img/jsoneditor-icons.png';
+var IMAGE   = './src/css/img/jsoneditor-icons.svg';
 var DIST    = './dist';
 
 // generate banner with today's date and correct version

src/css/contextmenu.css

@@ -66,7 +66,7 @@
   border: none;
   padding: 0;
   margin: 0;
-  background-image: url('img/jsoneditor-icons.png');
+  background-image: url('img/jsoneditor-icons.svg');
 }
 
 .jsoneditor-contextmenu ul li button div.expand {
@@ -75,7 +75,7 @@
   height: 24px;
   padding: 0;
   margin: 0 4px 0 0;
-  background: url('img/jsoneditor-icons.png') 0 -72px;
+  background: url('img/jsoneditor-icons.svg') 0 -72px;
   opacity: 0.4;
 }
 

src/css/img/description.txt

@@ -1,13 +1,14 @@
-JSON Editor Online Icons
+JSON Editor Icons
 
 size:             outer: 24x24 px
                   inner: 16x16 px 
 
 blue background:  RGBA 97b0f8ff
-gray background:  RGBA d3d3d3ff
+gray background:  RGBA 4d4d4dff
+grey background:  RGBA d3d3d3ff
 
-red foreground:   RGBA ff0000ff
+red foreground:   RGBA ff3300ff
-green foreground: RGBA 109618ff
+green foreground: RGBA 13ae00ff
 
 characters are based on the Arial font
 

src/css/img/export.sh

@@ -1,16 +0,0 @@
-#!/bin/sh
-# Export the SVG icons to PNG and GIF formats
-
-echo "Exporting the SVG icons..."
-
-outputdir=./
-mogrify -format png -background transparent -path $outputdir *.svg
-# mogrify -format gif -background transparent -path $outputdir dots_gray.svg
-echo "PNG's exported to $outputdir"
-
-# mogrify -format gif -background transparent -path gif *.svg
-# echo "GIF's exported to /gif"
-# mogrify -format png -background transparent -path png *.svg
-# echo "PNG's exported to /png"
-
-echo "Done"

src/css/jsoneditor.css

@@ -33,12 +33,12 @@
 }
 
 .jsoneditor .field.empty {
-  background-image: url('img/jsoneditor-icons.png');
+  background-image: url('img/jsoneditor-icons.svg');
   background-position: 0 -144px;
 }
 
 .jsoneditor .value.empty {
-  background-image: url('img/jsoneditor-icons.png');
+  background-image: url('img/jsoneditor-icons.svg');
   background-position: -48px -144px;
 }
 
@@ -87,7 +87,7 @@
   margin: 0;
   border: none;
   cursor: pointer;
-  background: transparent url('img/jsoneditor-icons.png');
+  background: transparent url('img/jsoneditor-icons.svg');
 }
 
 .jsoneditor div.tree button.collapsed {
@@ -188,7 +188,7 @@
 }
 
 .jsoneditor div.tree button.dragarea {
-  background: url('img/jsoneditor-icons.png') -72px -72px;
+  background: url('img/jsoneditor-icons.svg') -72px -72px;
   cursor: move;
 }
 

src/css/menu.css

@@ -21,7 +21,7 @@
   padding: 0;
   border-radius: 2px;
   border: 1px solid #aec0f8;
-  background: #e3eaf6 url('img/jsoneditor-icons.png');
+  background: #e3eaf6 url('img/jsoneditor-icons.svg');
   color: #4D4D4D;
   opacity: 0.8;
 

src/css/searchbox.css

@@ -43,7 +43,7 @@
   padding: 0;
   margin: 0;
   border: none;
-  background: url('img/jsoneditor-icons.png');
+  background: url('img/jsoneditor-icons.svg');
   vertical-align: top;
 }