How to use the solid-ui.icons function in solid-ui

/*
 **                 Pane for running existing forms for any object
 **
 */

const UI = require('solid-ui')
const $rdf = require('rdflib')
const ns = UI.ns

module.exports = {
  icon: UI.icons.iconBase + 'noun_122196.svg',

  name: 'form',

  audience: [ns.solid('PowerUser')],

  // Does the subject deserve this pane?
  label: function (subject) {
    var n = UI.widgets.formsFor(subject).length
    UI.log.debug('Form pane: forms for ' + subject + ': ' + n)
    if (!n) return null
    return '' + n + ' forms'
  },

  render: function (subject, context) {
    const kb = context.session.store
    const dom = context.dom

if (!ok) {
          var er = dom.createElement('p')
          er.textContent = body // @@ use nice error message
          div.insertBefore(er, spacer)
        } else {
          var discussion = UI.messageArea(
            dom, kb, subject, messageStore)
          div.insertBefore(discussion, spacer)
        }
      })
      donePredicate(ns.wf('message'))

      // Draggable attachment list
      UI.widgets.attachmentList(dom, subject, div, {
        doc: stateStore,
        promptIcon: UI.icons.iconBase + 'noun_25830.svg',
        predicate: ns.wf('attachment')
      })
      donePredicate(ns.wf('attachment'))

      outliner.appendPropertyTRs(div, plist, false,
        function (pred, inverse) {
          return !(pred.uri in predicateURIsDone)
        })
      outliner.appendPropertyTRs(div, qlist, true,
        function (pred, inverse) {
          return !(pred.uri in predicateURIsDone)
        })

      var refreshButton = dom.createElement('button')
      refreshButton.textContent = 'refresh'
      refreshButton.addEventListener('click', function (e) {

/*   Financial Transaction Pane
 **
 **  This outline pane allows a user to interact with a transaction
 **  downloaded from a bank statement, annotting it with classes and comments,
 ** trips, etc
 */

const UI = require('solid-ui')
const $rdf = require('rdflib')
const ns = UI.ns

module.exports = {
  // icon:  (module.__dirname || __dirname) + '22-pixel-068010-3d-transparent-glass-icon-alphanumeric-dollar-sign.png',
  icon: UI.icons.iconBase + 'noun_106746.svg',

  name: 'transaction',

  audience: [ns.solid('PowerUser')],

  // Does the subject deserve this pane?
  label: function (subject, context) {
    var kb = context.session.store
    var t = kb.findTypeURIs(subject)
    if (t['http://www.w3.org/2000/10/swap/pim/qif#Transaction']) return '$$'
    if (kb.any(subject, UI.ns.qu('amount'))) return '$$$' // In case schema not picked up

    // if (t['http://www.w3.org/2000/10/swap/pim/qif#Period']) return "period $"

    if (t['http://www.w3.org/ns/pim/trip#Trip']) return 'Trip $'

/*      RDF/XML content Pane
 **
 **  This pane shows the content of a particular RDF resource
 ** or at least the RDF semantics we attribute to that resource,
 ** in generated N3 syntax.
 */

const UI = require('solid-ui')
const ns = UI.ns

module.exports = {
  icon: UI.icons.originalIconBase + '22-text-xml4.png',

  name: 'RDFXML',

  audience: [ns.solid('Developer')],

  label: function (subject, context) {
    const store = context.session.store
    if (
      'http://www.w3.org/2007/ont/link#ProtocolEvent' in
      store.findTypeURIs(subject)
    ) {
      return null
    }

    var n = store.statementsMatching(undefined, undefined, undefined, subject)
      .length

/*   Class member Pane
 **
 **  This outline pane lists the members of a class
 */

var UI = require('solid-ui')
const $rdf = require('rdflib')

var ns = UI.ns

module.exports = {
  icon: UI.icons.originalIconBase + 'tango/22-folder-open.png',

  name: 'classInstance',

  // Create a new folder in a Solid system,

  audience: [ns.solid('PowerUser')],

  label: function (subject, context) {
    var kb = context.session.store
    var n = kb.each(undefined, ns.rdf('type'), subject).length
    if (n > 0) return 'List (' + n + ')' // Show how many in hover text
    return null // Suppress pane otherwise
  },

  render: function (subject, context) {
    var dom = context.dom

/*   Long Chat Pane
**
**  A long chat consists a of a series of chat files saved by date.
*/
/* global alert */

const UI = require('solid-ui')
const ns = UI.ns
const kb = UI.store
const mainClass = ns.meeting('LongChat') // @@ something from SIOC?

module.exports = { // noun_704.svg Canoe   noun_346319.svg = 1 Chat  noun_1689339.svg = three chat
  icon: UI.icons.iconBase + 'noun_1689339.svg',

  name: 'long chat',

  label: function (subject) {
    if (kb.holds(subject, ns.rdf('type'), ns.meeting('LongChat'))) { // subject is the object
      return 'Chat channnel'
    }
    return null // Suppress pane otherwise
  },

  mintClass: mainClass,

  mintNew: function (newPaneOptions) {
    var updater = kb.updater
    if (newPaneOptions.me && !newPaneOptions.me.uri) throw new Error('chat mintNew:  Invalid userid ' + newPaneOptions.me)

})
        } else {
          // no insertables
          displayTheMatrix()
        }
      })

      // If I made this in the first place, allow me to edit it.
      // @@ optionally -- allows others to if according to original
      var instanceCreator = kb.any(subject, ns.foaf('maker')) // owner?
      if (!instanceCreator || instanceCreator.sameTerm(me)) {
        var editButton = dom.createElement('button')
        editButton.setAttribute('style', inputStyle)
        // editButton.textContent = '(Modify the poll)' // noun_344563.svg
        const editIcon = dom.createElement('img')
        editIcon.setAttribute('src', UI.icons.iconBase + 'noun_344563.svg')
        editIcon.setAttribute('style', buttonIconStyle)
        editButton.appendChild(editIcon)
        editButton.addEventListener(
          'click',
          function (_e) {
            clearElement(div)
            showForms()
          },
          false
        )
        clearElement(naviLeft)
        naviLeft.appendChild(editButton)
      }

      // div.appendChild(editButton)

kb.fetcher.nowOrWhenFetched(groupList.uri, undefined, function (ok, message) {
                  if (!ok) return complainIfBad(ok, "Can't load group file: " + groupList + ': ' + message)
                  refreshNames()

                  if (!event.metaKey) { // If only one group has beeen selected show ACL
                    cardMain.innerHTML = ''
                    var visible = false
                    var aclControl = UI.aclControl.ACLControlBox5(group, dom, 'group', kb, function (ok, body) {
                      if (!ok) cardMain.innerHTML = 'Failed: ' + body
                    })
                    var sharingButton = cardMain.appendChild(dom.createElement('button'))
                    sharingButton.style.cssText = 'padding: 1em; margin: 1em'
                    var img = sharingButton.appendChild(dom.createElement('img'))
                    img.style.cssText = 'width: 1.5em; height: 1.5em'
                    img.setAttribute('src', UI.icons.iconBase + 'noun_123691.svg')
                    sharingButton.addEventListener('click', function () {
                      visible = !visible
                      if (visible) {
                        cardMain.appendChild(aclControl)
                      } else {
                        cardMain.removeChild(aclControl)
                      }
                    })
                  }
                })
              }, true)

return function statement_more_information_callback(uri){
		    divDescription.waitingFor.remove(uri);
		    if(UI.store.any(p.AJAR_formula, ap_just)) {
		      //The would get called twice even if the callback
		      //is canceled, so check the last child.
		      //dump("in statement_more_information_callback with st: "                         +st + "and uri: " + uri + "\n");
		      divDescription.informationFound = true;
		      if (p.lastChild.nodeName=="#text"){
			var explain_icon = p.appendChild(myDocument.createElement('img'));
			explain_icon.src = UI.icons.originalIconBase + "tango/22-help-browser.png";
			var click_cb = function(){
			  airPane.renderReasonsForStatement(
			    p.AJAR_formula, divJustification);
			};
			explain_icon.addEventListener('click',
						      click_cb,
						      false)
		      }
		      if (throbber_p && throbber_callback)
			throbber_callback();
		      return false; //no need to fire this function
		    }
		    //Fetch sameAs here. We try to load minimum sources
		    //so this comes after the above kb.any
		    for (var h=0;h<2;h++) { //Never use for each!!!
		                           //Array.prototype.remove would

var ap_nonCompliant = ap_air('non-compliant-with');
var ap_antcExpr = ap_tms('antecedent-expr');
var ap_just = ap_tms('justification');
var ap_subExpr = ap_tms('sub-expr');
var ap_description = ap_tms('description');
var ap_ruleName = ap_tms('rule-name');
var ap_prem = ap_tms('premise');
var ap_instanceOf = ap_air('instanceOf');
var justificationsArr = [];



var airPane = module.exports = {};

airPane.name = 'air';
airPane.icon = UI.icons.originalIconBase + '1pt5a.gif'

airPane.label = function(subject) {

    //Flush all the justification statements already found
    justificationsArr = [];

	//Find all the statements with air:justification in it
	var stsJust = UI.store.statementsMatching(undefined, ap_just, undefined, subject);
	//This will hold the string to display if the pane appears
	var stringToDisplay = null
	//Then make a registry of the compliant and non-compliant subjects
	//(This algorithm is heavily dependant on the output from the reasoner.
	//If the output changes, the parser will break.)
	for (var j=0; j