Refactor usage of built-in icons

Author: bendera

…ludes/vscode-select/template-elements.ts src/includes/icons.tssrc/includes/vscode-select/template-elements.ts renamed to src/includes/icons.ts src/includes/vscode-select/template-elements.ts renamed to src/includes/icons.ts

@@ -1,6 +1,6 @@
-import {html, svg} from 'lit';
+import {svg} from 'lit';
 
-export const chevronDownIcon = html`
+export const chevronDownIcon = svg`
   <span class="icon">
     <svg
       width="16"
@@ -18,6 +18,20 @@ export const chevronDownIcon = html`
   </span>
 `;
 
+export const chevronRightIcon = svg`<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg"
+  fill="currentColor"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z"
+  />
+</svg>`;
+
 export const checkIcon = svg`<svg
   width="16"
   height="16"

src/includes/vscode-select/vscode-select-base.ts

@@ -12,7 +12,7 @@ import {VscElement} from '../VscElement.js';
 import {filterOptionsByPattern, highlightRanges} from './helpers.js';
 import type {InternalOption, Option, FilterMethod} from './types.js';
 import {OptionListController} from './OptionListController.js';
-import {checkIcon} from './template-elements.js';
+import {checkIcon} from '../icons.js';
 import '../../vscode-scrollable/vscode-scrollable.js';
 
 export const VISIBLE_OPTS = 10;

src/vscode-checkbox/vscode-checkbox.ts

@@ -3,6 +3,7 @@ import {ifDefined} from 'lit/directives/if-defined.js';
 import {property, query} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement} from '../includes/VscElement.js';
+import {checkIcon} from '../includes/icons.js';
 import {FormButtonWidgetBase} from '../includes/form-button-widget/FormButtonWidgetBase.js';
 import {LabelledCheckboxOrRadioMixin} from '../includes/form-button-widget/LabelledCheckboxOrRadio.js';
 import styles from './vscode-checkbox.styles.js';
@@ -270,21 +271,7 @@ export class VscodeCheckbox
       'label-inner': true,
     });
 
-    const icon = html`<svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      class="check-icon"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z"
-      />
-    </svg>`;
-    const check = this.checked && !this.indeterminate ? icon : nothing;
+    const check = this.checked && !this.indeterminate ? checkIcon : nothing;
     const indeterminate = this.indeterminate
       ? html`<span class="indeterminate-icon"></span>`
       : nothing;

src/vscode-collapsible/vscode-collapsible.styles.ts

@@ -47,13 +47,21 @@ const styles: CSSResultGroup = [
     }
 
     .header-icon {
+      display: block;
+      height: 16px;
+      margin: 0 3px;
+      width: 16px;
+    }
+
+    .header-icon svg {
       color: var(--vscode-icon-foreground, #cccccc);
       display: block;
       flex-shrink: 0;
-      margin: 0 3px;
+      height: 100%;
+      width: 100%;
     }
 
-    .collapsible.open .header-icon {
+    .collapsible.open .header-icon svg {
       transform: rotate(90deg);
     }
 

src/vscode-collapsible/vscode-collapsible.ts

@@ -1,6 +1,7 @@
 import {html, nothing, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
+import {chevronRightIcon} from '../includes/icons.js';
 import {customElement, VscElement} from '../includes/VscElement.js';
 import styles from './vscode-collapsible.styles.js';
 
@@ -92,21 +93,6 @@ export class VscodeCollapsible extends VscElement {
     };
     const heading = this.heading ? this.heading : this.title;
 
-    const icon = html`<svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      class="header-icon"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z"
-      />
-    </svg>`;
-
     const descriptionMarkup = this.description
       ? html`<span class="description">${this.description}</span>`
       : nothing;
@@ -119,7 +105,7 @@ export class VscodeCollapsible extends VscElement {
           @click=${this._onHeaderClick}
           @keydown=${this._onHeaderKeyDown}
         >
-          ${icon}
+          <div class="header-icon">${chevronRightIcon}</div>
           <h3 class="title">${heading}${descriptionMarkup}</h3>
           <div class="header-slots">
             <div class=${classMap(actionsClasses)}>

src/vscode-multi-select/vscode-multi-select.ts

@@ -2,7 +2,7 @@ import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {customElement} from '../includes/VscElement.js';
-import {chevronDownIcon} from '../includes/vscode-select/template-elements.js';
+import {chevronDownIcon} from '../includes/icons.js';
 import {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';
 import styles from './vscode-multi-select.styles.js';
 import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';

src/vscode-single-select/vscode-single-select.ts

@@ -2,7 +2,7 @@ import {html, LitElement, TemplateResult} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {customElement} from '../includes/VscElement.js';
-import {chevronDownIcon} from '../includes/vscode-select/template-elements.js';
+import {chevronDownIcon} from '../includes/icons.js';
 import {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';
 import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
 import styles from './vscode-single-select.styles.js';

src/vscode-tree-item/vscode-tree-item.ts

@@ -4,6 +4,7 @@ import {property, queryAssignedElements, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {customElement, VscElement} from '../includes/VscElement';
 import {stylePropertyMap} from '../includes/style-property-map';
+import {chevronRightIcon} from '../includes/icons';
 import {
   ConfigContext,
   configContext,
@@ -17,19 +18,6 @@ import {ExpandMode, IndentGuides} from '../vscode-tree/vscode-tree.js';
 const BASE_INDENT = 3;
 const ARROW_CONTAINER_WIDTH = 30;
 
-const arrowIcon = html`<svg
-  width="16"
-  height="16"
-  viewBox="0 0 16 16"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z"
-  />
-</svg>`;
-
 function getParentItem(childItem: VscodeTreeItem) {
   if (!childItem.parentElement) {
     return null;
@@ -429,7 +417,7 @@ export class VscodeTreeItem extends VscElement {
                 'icon-rotated': this.open,
               })}
             >
-              ${arrowIcon}
+              ${chevronRightIcon}
             </div>`
           : nothing}
         <div class=${classMap(iconContainerClasses)}>