feat(options): replace svg with inline background

src/plugins/options/option/option.ts

@@ -6,72 +6,60 @@ import {ENTER} from '@exadel/esl/modules/esl-utils/dom/keys';
 
 /** Config used to create options. */
 export type OptionConfig = {
-    /** Attribute to toggle. */
-    attribute: string;
-    /** Location of option's icon. */
-    iconUrl: string;
-    /** Callback to indicate if option should be rendered. */
-    canActivate?: () => boolean;
+  /** Attribute to toggle. */
+  attribute: string;
+  /** Callback to indicate if option should be rendered. */
+  canActivate?: () => boolean;
 };
 
 /** Custom element to toggle {@link UIPRoot} attributes. */
 export class UIPOption extends ESLBaseElement {
-    static is = 'uip-option';
-    @attr() public attribute: string;
-    @boolAttr() public active: boolean;
-    protected icon: ESLImage;
+  static is = 'uip-option';
+  @attr() public attribute: string;
+  @boolAttr() public active: boolean;
 
-    static create(optionConfig: OptionConfig): UIPOption {
-        const option = document.createElement('uip-option') as UIPOption;
-        option.icon = document.createElement('esl-image');
-        option.icon.mode = 'inner-svg';
-        option.icon.dataset.src = optionConfig.iconUrl;
-        option.setAttribute('attribute', optionConfig.attribute);
+  static create(optionConfig: OptionConfig): UIPOption {
+    const option = document.createElement('uip-option') as UIPOption;
+    option.setAttribute('attribute', optionConfig.attribute);
+    return option;
+  }
 
-        return option;
-    }
+  protected connectedCallback() {
+    super.connectedCallback();
+    this.classList.add(`${this.attribute}-option`);
+    this.tabIndex = 0;
+    this.bindEvents();
+  }
 
-    protected connectedCallback() {
-        super.connectedCallback();
-        this.classList.add(`${this.attribute}-option`);
-        this.tabIndex = 0;
-        this.bindEvents();
-        this.render();
-    }
+  protected bindEvents() {
+    this.addEventListener('click', this._onClick);
+    this.addEventListener('keydown', this._onKeydown);
+  }
 
-    protected bindEvents() {
-        this.addEventListener('click', this._onClick);
-        this.addEventListener('keydown', this._onKeydown);
-    }
+  @bind
+  protected _onClick() {
+    this.toggleState();
+    EventUtils.dispatch(this, 'uip:optionclick');
+  }
 
-    protected render() {
-        this.icon && this.append(this.icon);
-    }
+  @bind
+  protected _onKeydown(e: KeyboardEvent) {
+    if (ENTER !== e.key) return;
+    this.toggleState();
+    EventUtils.dispatch(this, 'uip:optionclick');
+  }
 
-    @bind
-    protected _onClick() {
-        this.toggleState();
-        EventUtils.dispatch(this, 'uip:optionclick');
-    }
+  protected disconnectedCallback() {
+    this.unbindEvents();
+    this.disconnectedCallback();
+  }
 
-    @bind
-    protected _onKeydown(e: KeyboardEvent) {
-        if (ENTER !== e.key) return;
-        this.toggleState();
-        EventUtils.dispatch(this, 'uip:optionclick');
-    }
+  protected unbindEvents() {
+    this.removeEventListener('click', this._onClick);
+  }
 
-    protected disconnectedCallback() {
-        this.unbindEvents();
-        this.disconnectedCallback();
-    }
-
-    protected unbindEvents() {
-        this.removeEventListener('click', this._onClick);
-    }
-
-    public toggleState(force?: boolean) {
-        this.active = force === undefined ? !this.active : force;
-        this.classList.toggle('active', this.active);
-    }
+  public toggleState(force?: boolean) {
+    this.active = force === undefined ? !this.active : force;
+    this.classList.toggle('active', this.active);
+  }
 }

src/plugins/options/option/theme.less

@@ -36,7 +36,7 @@
           &-wrapper {
             background-color: @dark-theme;
           }
-  
+
           &-control {
             &:before {
               background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9' xml:space='preserve'%3E%3Cpolyline points='0,0 8,8 16,0' fill='none' stroke='white' stroke-width='2'%3E%3C/polyline%3E%3C/svg%3E");
@@ -45,7 +45,7 @@
         }
 
         .uip-option {
-          color: @light-text;
+          filter: invert(1);
         }
       }
     }

src/plugins/options/options.ts

@@ -14,23 +14,19 @@ export class UIPOptions extends UIPPlugin {
   protected UIPOptionsConfig: OptionConfig[] = [
     {
       attribute: 'dark-theme',
-      iconUrl: '../../static/icons/theme.svg',
       canActivate: () => !this.hasAttribute('hide-theme')
     },
     {
       attribute: 'rtl-direction',
-      iconUrl: '../../static/icons/rtl.svg',
       canActivate: () => !this.hasAttribute('hide-direction')
     },
     {
       attribute: 'settings-collapsed',
-      iconUrl: '../../static/icons/settings.svg',
       canActivate: () => !this.hasAttribute('hide-settings') &&
       !!this.root?.querySelector('uip-settings')
     },
     {
       attribute: 'editor-collapsed',
-      iconUrl: '../../static/icons/editor.svg',
       canActivate: () => !this.hasAttribute('hide-editor') &&
       !!this.root?.querySelector('uip-editor')
     }

src/variables.less

@@ -10,6 +10,5 @@
 @dark-text-decorator-color: #535353;
 @section-border: #ebebeb;
 @element-border: #dee2e6;
-@option-color: #5f5f5f;
 
 @mobile: e('screen and (max-width: 719px)');