Allow to customize icons in tags

src/selector_manager/config/config.js

@@ -30,6 +30,18 @@ export default {
   iconSync:
     '<svg viewBox="0 0 24 24"><path d="M12 18c-3.31 0-6-2.69-6-6 0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4m0-11V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8z"></path></svg>',
 
+  // Icon to show when the selector is enabled
+  iconTagOn:
+    '<svg viewBox="0 0 24 24"><path d="M19 19H5V5h10V3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8h-2m-11.09-.92L6.5 11.5 11 16 21 6l-1.41-1.42L11 13.17l-3.09-3.09z"></path></svg>',
+
+  // Icon to show when the selector is disabled
+  iconTagOff:
+    '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2m0 2v14H5V5h14z"></path></svg>',
+
+  // Icon used to remove the selector
+  iconTagRemove:
+    '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>',
+
   /**
    * Custom render function for the Select Manager
    * @example

src/selector_manager/view/ClassTagView.js

@@ -4,14 +4,14 @@ const inputProp = 'contentEditable';
 
 export default Backbone.View.extend({
   template() {
-    const { pfx, model } = this;
+    const { pfx, model, config } = this;
     const label = model.get('label') || '';
 
     return `
       <span id="${pfx}checkbox" class="${pfx}tag-status" data-tag-status></span>
       <span id="${pfx}tag-label" data-tag-name>${label}</span>
       <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove>
-        <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>
+        ${config.iconTagRemove}
       </span>
     `;
   },
@@ -109,18 +109,15 @@ export default Backbone.View.extend({
    * @private
    */
   updateStatus() {
-    const { model, $el } = this;
+    const { model, $el, config } = this;
+    const { iconTagOn, iconTagOff } = config;
     const $chk = $el.find('[data-tag-status]');
-    const iconOff =
-      '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2m0 2v14H5V5h14z"></path></svg>';
-    const iconOn =
-      '<svg viewBox="0 0 24 24"><path d="M19 19H5V5h10V3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8h-2m-11.09-.92L6.5 11.5 11 16 21 6l-1.41-1.42L11 13.17l-3.09-3.09z"></path></svg>';
 
     if (model.get('active')) {
-      $chk.html(iconOn);
+      $chk.html(iconTagOn);
       $el.removeClass('opac50');
     } else {
-      $chk.html(iconOff);
+      $chk.html(iconTagOff);
       $el.addClass('opac50');
     }
   },