Default SVG Icons

Introduction

If you want to use the SVG icons in the JSON Editor for the buttons, then this Wiki page may support you to integrate SVG images in your JSON editor applications. In general icons are bundled and stored as fonts (e.g. with Font Awesome 4.7.0. This requires the fonts to be stored locally for offline use as AppLSAC or the WebApp will performe a remote injection of CSS files and fonts (see https://www.w3schools.com/w3css/w3css_icons.asp ). If you want to minimize the digital footprint of WebApps or make them run offline e.g. as Electron Apps or AppLSAC, then the following approach might be helpful for your. Assume you want to use the JSON editor and it is required, that the icons are available during build time for integration the icons in electron application bundle or for offline use as AppLSAC-2. Otherwise the application will not display the icons in the application when the software is started without internet connectivity.

SVG Images for Icons

The GitHub repository Icons4Menu contains some icons that can be used in WebApps. The required icons in that repository can be taken from Creative Commons Zero licensed JQuery-Mobile Repository 1.4.5 or from Creative Commons Icons stored in Wiki Commons.

SVG Icon in Applications - in General

An example for a Hamburger Menu Application is a repository, that uses the icons4menu for displaying the SVG icons in the hamburger_menu_app. This is a basic example of an webbased application (see AppLSAC). Navigation is implemented with Hamburger Menu and JQUery.

• The folder was used for building a ZIP for the demo,

• the ZIP file hamburger_menu_app.zip was generated with a test version of JSONEditor4Menu and this repository is a template ZIP for the generated ZIP file the user menu.

  Hamburger Menu App Demo: https://niebert.github.io/hamburger_menu_app

JSON Editor and SVG Icons

The Wiki resource shows how to use icons with an additional icon librariy, which requires modifications in src/iconlib.js as Abstract Class in your fork or you can add a new IconLib for using the icons together with other iconlibs. In this case the SVG icons will be added and defined in src/iconlibs/*.js. In general SVG icons can be used by loading them directly from the file system or server e.g. with an image tag (img). SVG icons can also be integrated with style sheets - see CSS tricks to embed SVG as Menu Icons

Underlying concepts for a CDN and font independent integration of icons in the JSON editor are describe in the following paragraph (keep in mind that this iconlib is not integrated in version:

SVG Icons stored in a Array of Strings

• SVG images are in fact strings with a XML format, so these
• Store the required SVG strings for all icons in a hash so that the string can be accessed by mapping attribute of the iconlib class e.g. by mapping["collapse"] or mapping.collapse you will get the XML string for the collapse icon. The value of the mapping would contain the string of the SVG icon.

Storage of Icons in an Associative Array/Hash

The hash mapping maps a key to the XML source code of the SVG icon (Scalable Vector Graphics). The JSON editor requires just a few basic icons that can be selected for the repository Icons4Menu.

mapping : {
  collapse: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  expand: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  "delete": 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  edit: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  add: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  cancel: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  save: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  moveup: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  movedown: 'data:image/svg+xml;utf8,<svg ... > ... </svg>',
  upload: 'data:image/svg+xml;utf8,<svg ... > ... </svg>'
},

• If you want to have these SVG icons as default, add the mapping to the abstract class in src/iconlib.js.
• If you want to create the new SVG iconlib The icon will be injected just as img tag, that will look in a hard coded way like this:

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

Default Icons from icons4menu

You can download the repository

Icon	File	Folder	Source File	Licence	Add Date

Create the mapping Object from icons4menu

If you want to create that with Javascript in the DOM you can expand the Abstract class to create a new iconlib. with the method getIcon() with create an img tag instead of an i-tag for the icon. Add new Icon Lib and overwrite method getIcon() that is inherited from the Abstract Class for iconlibs in the file src/iconlib.js. The original method getIcon() can not be used, because it is designed to create an i-tag and the icon will be selected by adding a specific class name to the i-tag, e.g. for an icon for aSavebutton.svg4iconcontains the XML code for the icon, that is stored inmapping`.

getIcon: function(key,height,width) {
  var icon4dom = null;
  var svg4icon = this.mapping[key];
  if (svg4icon) {
    icon4dom = document.createElement("img");
    icon4dom.src = 'data:image/svg+xml;utf8,' + svg4icon;
    icon4dom.alt = 'Icon '+key;
    if (height) {
      icon4dom.height = height; // e.g. "18px"
    }
    if (width) {
      icon4dom.width = width; // e.g. "18px"
    };
    icon4dom.className = "jsoneditor-svg-icon"
  };
  return icon4dom;
}

This tutorial show how to add a new iconlib to the JSON editor and shows how to overwrite the inherited method getIcon() in src/iconlib.js. If you new icon library has the name svgicons this method will be defined in a new file src/iconlibs/svgicons.js. Analyze the existing iconlibs first in src/iconlibs/*.js to understand the definition of Icon libraries in general.

Requirements

Assume you have cloned the library jsoneditor to you local filesystem.

• git clone <gir-repo-url>
• cd <path2jsoneditor>
• npm install
• Add the icon library as mentioned above
• build with npm run build
• use the build dist/jsoneditor.js in your WebApp to the library.