@api-client/ui 0.0.15 → 0.1.0

package/src/md/icon-button/internals/IconButton.ts

@@ -0,0 +1,172 @@
+/* eslint-disable max-len */
+import { html, PropertyValues, TemplateResult } from 'lit'
+import { property, queryAsync, state } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { when } from 'lit/directives/when.js'
+import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import UiRipple from '../../ripple/internals/ripple.js'
+import { ripple } from '../../effects/rippleDirective.js'
+import { UiElement } from '../../UiElement.js'
+import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+
+import '../../ripple/ui-ripple.js'
+
+/**
+ * The type of the icon button rendered.
+ */
+export enum IconButtonType {
+  'filled' = 'filled',
+  'tonal' = 'tonal',
+  'outlined' = 'outlined',
+  'standard' = 'standard',
+}
+
+/**
+ * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
+ */
+export default class UiIconButton extends UiElement {
+  /**
+   * The type of the rendered button according to Material 3 spec.
+   *
+   * @default {ButtonType.filled}
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor type: IconButtonType
+
+  /**
+   * Whether the button can be toggled.
+   * A toggle button behaves different as it gets the `aria-pressed` attribute
+   * which changes depending on the pressed state.
+   * A toggle button is activated until it is clicked/pressed again.
+   * A toggle button dispatched `active` event when the press state change.
+   * The host can check the `active` property to know the state.
+   *
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor toggle: boolean | undefined
+
+  /**
+   * A flag that determines whether the button is activated (pressed when `toggle` is set).
+   * It is `undefined` and makes no effect when `toggle` is not set.
+   *
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor active: boolean | undefined
+
+  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
+
+  @state() protected accessor showRipple = false
+
+  get disabled(): boolean {
+    return isDisabled(this)
+  }
+
+  /**
+   * When set, the button is a disabled state.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean })
+  set disabled(value: boolean) {
+    const old = isDisabled(this)
+    setDisabled(this, value)
+    this.requestUpdate('disabled', old)
+  }
+
+  protected readonly getRipple = (): Promise<UiRipple | null> => {
+    this.showRipple = true
+    return this.ripple
+  }
+
+  constructor() {
+    super()
+
+    this.type = IconButtonType.standard
+    this.actionController.cancelKeyboardEvents = true
+    this.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.addEventListener('keyup', this.handleKeyUp.bind(this))
+    this.addEventListener('click', this.handleClick.bind(this))
+    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
+    this.addEventListener('pointerup', this.handlePointerUp.bind(this))
+    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
+    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button')
+    }
+    if (!this.hasAttribute('tabindex') && !this.disabled) {
+      this.setAttribute('tabindex', '0')
+    }
+  }
+
+  protected override update(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('active')) {
+      this.setAttribute('aria-pressed', String(this.active))
+    }
+    super.update(changedProperties)
+  }
+
+  protected async pressRipple(): Promise<void> {
+    const element = await this.getRipple()
+    if (element && !element.isPressed) {
+      element.beginPress()
+    }
+  }
+
+  protected async endRipple(): Promise<void> {
+    const element = await this.getRipple()
+    element?.endPress()
+  }
+
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.pressRipple()
+  }
+
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config)
+    this.endRipple()
+    const { cancelled, reason } = config
+    if (cancelled) {
+      return
+    }
+    if (!reason || reason === 'enter' || reason === 'space') {
+      if (this.toggle) {
+        this.active = !this.active
+        // note, only dispatch events when user interacting with the UI.
+        this.dispatchEvent(new Event('active'))
+      }
+    }
+    if (reason === 'enter' || reason === 'space') {
+      if (!this.toggle) {
+        this.click()
+      }
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const { pressed = false } = this
+    const containerClasses = classMap({
+      surface: true,
+      pressed,
+    })
+    return html`
+      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+        <div class="container"></div>
+        <div class="state"></div>
+        ${when(this.showRipple, this.renderRipple)}
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `
+  }
+
+  protected renderRipple = (): TemplateResult => {
+    const { disabled } = this
+    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
+  }
+}

package/src/md/icon-button/ui-icon-button.ts

@@ -0,0 +1,15 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/IconButton.js'
+import styles from './internals/IconButton.styles.js'
+
+@customElement('ui-icon-button')
+export class UiIconButtonElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-icon-button': UiIconButtonElement
+  }
+}

package/src/md/icons/Icons.ts

@@ -0,0 +1,324 @@
+import { svg, SVGTemplateResult } from 'lit'
+
+/**
+ * Wraps icon into an SVG container.
+ * @param tpl Icon definition
+ * @returns Complete SVG icon definition
+ */
+export const iconWrapper = (tpl: SVGTemplateResult, width = 24, height = 24, top = 0, left = 0): SVGTemplateResult =>
+  svg`<svg viewBox="${top} ${left} ${width} ${height}" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`
+
+export type IconType =
+  | 'add'
+  | 'ai'
+  | 'api'
+  | 'apps'
+  | 'arrowBack'
+  | 'arrowDropDown'
+  | 'calendarToday'
+  | 'cancel'
+  | 'cancelFilled'
+  | 'certificate'
+  | 'check'
+  | 'checkBox'
+  | 'checkBoxBlank'
+  | 'checkCircle'
+  | 'checkIndeterminate'
+  | 'chevronLeft'
+  | 'chevronRight'
+  | 'close'
+  | 'cloud'
+  | 'cloudFilled'
+  | 'collectionsBookmark'
+  | 'deleteFile'
+  | 'deleteOutline'
+  | 'draft'
+  | 'edit'
+  | 'environment'
+  | 'event'
+  | 'expandMore'
+  | 'fileDownload'
+  | 'folder'
+  | 'folderFilled'
+  | 'folderShared'
+  | 'help'
+  | 'history'
+  | 'info'
+  | 'key'
+  | 'link'
+  | 'menu'
+  | 'number'
+  | 'leaderBoard'
+  | 'moreVert'
+  | 'openInNew'
+  | 'personAdd'
+  | 'playArrow'
+  | 'project'
+  | 'remove'
+  | 'rename'
+  | 'request'
+  | 'restoreFromTrash'
+  | 'save'
+  | 'schedule'
+  | 'schema'
+  | 'schemaEntity'
+  | 'schemaModel'
+  | 'schemaNamespace'
+  | 'search'
+  | 'send'
+  | 'settings'
+  | 'space'
+  | 'taskAlt'
+  | 'textFields'
+  | 'timeline'
+  | 'tune'
+  | 'viewGrid'
+  | 'viewList'
+  | 'visibility'
+  | 'visibilityOff'
+  | 'warning'
+
+export const add = iconWrapper(svg`<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>`)
+export const ai = iconWrapper(
+  svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C12 0 12.2772 2.26655 13.0473 4.62671C13.5493 6.16483 14.2606 7.74271 15.2411 8.75891C16.2028 9.75562 17.6621 10.4594 19.1153 10.9502C21.5663 11.778 24 12 24 12C24 12 21.5663 12.222 19.1153 13.0498C17.6621 13.5406 16.2028 14.2444 15.2411 15.2411C14.2606 16.2573 13.5493 17.8352 13.0473 19.3733C12.2772 21.7335 12 24 12 24C12 24 11.7228 21.7335 10.9527 19.3733C10.4507 17.8352 9.73939 16.2573 8.75891 15.2411C7.79723 14.2444 6.33792 13.5406 4.88468 13.0498C2.43371 12.222 0 12 0 12C0 12 2.43371 11.778 4.88468 10.9502C6.33792 10.4594 7.79723 9.75562 8.75891 8.75891C9.73939 7.74271 10.4507 6.16483 10.9527 4.62671C11.7228 2.26655 12 0 12 0ZM12 7.42332C11.5272 8.42193 10.9363 9.38261 10.1982 10.1476C9.45952 10.9132 8.54012 11.5192 7.57949 12C8.54012 12.4808 9.45952 13.0868 10.1982 13.8524C10.9363 14.6174 11.5272 15.5781 12 16.5767C12.4728 15.5781 13.0637 14.6174 13.8018 13.8524C14.5405 13.0868 15.4599 12.4808 16.4205 12C15.4599 11.5192 14.5405 10.9132 13.8018 10.1476C13.0637 9.38261 12.4728 8.42193 12 7.42332Z"/>`
+)
+export const api = iconWrapper(
+  svg`<path d="M6.5 20C4.98333 20 3.6875 19.475 2.6125 18.425C1.5375 17.375 1 16.0917 1 14.575C1 13.275 1.39167 12.1167 2.175 11.1C2.95833 10.0833 3.98333 9.43333 5.25 9.15C5.66667 7.61667 6.5 6.375 7.75 5.425C9 4.475 10.4167 4 12 4C13.95 4 15.6042 4.67917 16.9625 6.0375C18.3208 7.39583 19 9.05 19 11C20.15 11.1333 21.1042 11.6292 21.8625 12.4875C22.6208 13.3458 23 14.35 23 15.5C23 16.75 22.5625 17.8125 21.6875 18.6875C20.8125 19.5625 19.75 20 18.5 20H6.5ZM6.5 18H18.5C19.2 18 19.7917 17.7583 20.275 17.275C20.7583 16.7917 21 16.2 21 15.5C21 14.8 20.7583 14.2083 20.275 13.725C19.7917 13.2417 19.2 13 18.5 13H17V11C17 9.61667 16.5125 8.4375 15.5375 7.4625C14.5625 6.4875 13.3833 6 12 6C10.6167 6 9.4375 6.4875 8.4625 7.4625C7.4875 8.4375 7 9.61667 7 11H6.5C5.53333 11 4.70833 11.3417 4.025 12.025C3.34167 12.7083 3 13.5333 3 14.5C3 15.4667 3.34167 16.2917 4.025 16.975C4.70833 17.6583 5.53333 18 6.5 18Z"/>`
+)
+export const apps = iconWrapper(
+  svg`<path d="M6 8Q5.175 8 4.588 7.412Q4 6.825 4 6Q4 5.175 4.588 4.588Q5.175 4 6 4Q6.825 4 7.412 4.588Q8 5.175 8 6Q8 6.825 7.412 7.412Q6.825 8 6 8ZM12 20Q11.175 20 10.588 19.413Q10 18.825 10 18Q10 17.175 10.588 16.587Q11.175 16 12 16Q12.825 16 13.413 16.587Q14 17.175 14 18Q14 18.825 13.413 19.413Q12.825 20 12 20ZM6 20Q5.175 20 4.588 19.413Q4 18.825 4 18Q4 17.175 4.588 16.587Q5.175 16 6 16Q6.825 16 7.412 16.587Q8 17.175 8 18Q8 18.825 7.412 19.413Q6.825 20 6 20ZM6 14Q5.175 14 4.588 13.412Q4 12.825 4 12Q4 11.175 4.588 10.587Q5.175 10 6 10Q6.825 10 7.412 10.587Q8 11.175 8 12Q8 12.825 7.412 13.412Q6.825 14 6 14ZM12 14Q11.175 14 10.588 13.412Q10 12.825 10 12Q10 11.175 10.588 10.587Q11.175 10 12 10Q12.825 10 13.413 10.587Q14 11.175 14 12Q14 12.825 13.413 13.412Q12.825 14 12 14ZM18 8Q17.175 8 16.587 7.412Q16 6.825 16 6Q16 5.175 16.587 4.588Q17.175 4 18 4Q18.825 4 19.413 4.588Q20 5.175 20 6Q20 6.825 19.413 7.412Q18.825 8 18 8ZM12 8Q11.175 8 10.588 7.412Q10 6.825 10 6Q10 5.175 10.588 4.588Q11.175 4 12 4Q12.825 4 13.413 4.588Q14 5.175 14 6Q14 6.825 13.413 7.412Q12.825 8 12 8ZM18 14Q17.175 14 16.587 13.412Q16 12.825 16 12Q16 11.175 16.587 10.587Q17.175 10 18 10Q18.825 10 19.413 10.587Q20 11.175 20 12Q20 12.825 19.413 13.412Q18.825 14 18 14ZM18 20Q17.175 20 16.587 19.413Q16 18.825 16 18Q16 17.175 16.587 16.587Q17.175 16 18 16Q18.825 16 19.413 16.587Q20 17.175 20 18Q20 18.825 19.413 19.413Q18.825 20 18 20Z"/>`
+)
+export const arrowBack = iconWrapper(
+  svg`<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>`
+)
+export const arrowDropDown = iconWrapper(svg`<path d="M7 10l5 5 5-5z"/>`)
+export const cancel = iconWrapper(
+  svg`<path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/>`
+)
+export const cancelFilled = iconWrapper(
+  svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>`
+)
+export const certificate = iconWrapper(
+  svg`<path d="M4 3c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2h8v5l3-3l3 3v-5h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4m8 2l3 2l3-2v3.5l3 1.5l-3 1.5V15l-3-2l-3 2v-3.5L9 10l3-1.5V5M4 5h5v2H4V5m0 4h3v2H4V9m0 4h5v2H4v-2Z"/>`
+)
+export const check = iconWrapper(svg`<path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/>`)
+export const checkBox = iconWrapper(
+  svg`<path d="m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"/>`
+)
+export const checkBoxBlank = iconWrapper(
+  svg`<path d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14Z"/>`
+)
+export const checkCircle = iconWrapper(
+  svg`<path d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+export const checkIndeterminate = iconWrapper(svg`<path d="M7 13v-2h10v2Z"/>`)
+export const chevronLeft = iconWrapper(svg`<path d="m14 18-6-6 6-6 1.4 1.4-4.6 4.6 4.6 4.6Z"/>`)
+export const chevronRight = iconWrapper(
+  svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`
+)
+export const close = iconWrapper(
+  svg`<path d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z"></path>`
+)
+export const cloud = iconWrapper(
+  svg`<path d="M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96C18.67 6.59 15.64 4 12 4z"/>`
+)
+export const cloudFilled = iconWrapper(
+  svg`<path d="M6.5 20Q4.225 20 2.613 18.425Q1 16.85 1 14.575Q1 12.625 2.175 11.1Q3.35 9.575 5.25 9.15Q5.875 6.85 7.75 5.425Q9.625 4 12 4Q14.925 4 16.962 6.037Q19 8.075 19 11Q20.725 11.2 21.863 12.487Q23 13.775 23 15.5Q23 17.375 21.688 18.688Q20.375 20 18.5 20Z"/>`
+)
+export const collectionsBookmark = iconWrapper(
+  svg`<path d="M8 16h12V4h-2v7l-2.5-1.5L13 11V4H8v12Zm0 2q-.825 0-1.412-.587Q6 16.825 6 16V4q0-.825.588-1.413Q7.175 2 8 2h12q.825 0 1.413.587Q22 3.175 22 4v12q0 .825-.587 1.413Q20.825 18 20 18Zm-4 4q-.825 0-1.412-.587Q2 20.825 2 20V6h2v14h14v2Zm9-18h5ZM8 4h12Z"/>`
+)
+export const deleteFile = iconWrapper(
+  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z"/>`
+)
+export const deleteOutline = iconWrapper(
+  svg`<path d="M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM9 17h2V8H9Zm4 0h2V8h-2ZM7 6v13Z"/>`
+)
+export const draft = iconWrapper(
+  svg`<path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+export const edit = iconWrapper(
+  svg`<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>`
+)
+export const environment = iconWrapper(
+  svg`<path d="M160,32h0V160s0,0,0,0H32l0,0h0V32s0,0,0,0H160m0-12H32A12,12,0,0,0,20,32V160a12,12,0,0,0,12,12H160a12,12,0,0,0,12-12V32a12,12,0,0,0-12-12Z"/><path d="M96,68A28,28,0,1,1,68,96,28,28,0,0,1,96,68m0-12a40,40,0,1,0,40,40A40,40,0,0,0,96,56Z"/><rect width="192" height="192" style="fill:none"/>`,
+  192,
+  192
+)
+export const expandMore = iconWrapper(svg`<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"></path>`)
+export const fileDownload = iconWrapper(svg`<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>`)
+export const folder = iconWrapper(
+  svg`<path d="M9.17 6l2 2H20v10H4V6h5.17M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/>`
+)
+export const folderFilled = iconWrapper(
+  svg`<path d="M4 20Q3.175 20 2.588 19.413Q2 18.825 2 18V6Q2 5.175 2.588 4.588Q3.175 4 4 4H10L12 6H20Q20.825 6 21.413 6.588Q22 7.175 22 8V18Q22 18.825 21.413 19.413Q20.825 20 20 20Z"/>`
+)
+export const folderShared = iconWrapper(
+  svg`<path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V6h5.17l2 2H20v10zm-5-5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-4 4h8v-1c0-1.33-2.67-2-4-2s-4 .67-4 2v1z"/>`
+)
+// <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"></svg>
+export const help = iconWrapper(
+  svg`<path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+export const history = iconWrapper(
+  svg`<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"></path>`
+)
+export const info = iconWrapper(
+  svg`<path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path>`
+)
+export const key = iconWrapper(
+  svg`<path d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM6 18C4.33333 18 2.91667 17.4167 1.75 16.25C0.583333 15.0833 0 13.6667 0 12C0 10.3333 0.583333 8.91667 1.75 7.75C2.91667 6.58333 4.33333 6 6 6C7.11667 6 8.12917 6.275 9.0375 6.825C9.94583 7.375 10.6667 8.1 11.2 9H20L23 12L18.5 16.5L16.5 15L14.5 16.5L12.375 15H11.2C10.6667 15.9 9.94583 16.625 9.0375 17.175C8.12917 17.725 7.11667 18 6 18ZM6 16C6.93333 16 7.75417 15.7167 8.4625 15.15C9.17083 14.5833 9.64167 13.8667 9.875 13H13L14.45 14.025L16.5 12.5L18.275 13.875L20.15 12L19.15 11H9.875C9.64167 10.1333 9.17083 9.41667 8.4625 8.85C7.75417 8.28333 6.93333 8 6 8C4.9 8 3.95833 8.39167 3.175 9.175C2.39167 9.95833 2 10.9 2 12C2 13.1 2.39167 14.0417 3.175 14.825C3.95833 15.6083 4.9 16 6 16Z"/>`
+)
+export const link = iconWrapper(
+  svg`<path d="M440-280H280q-83 0-141.5-58.5T80-480q0-83 58.5-141.5T280-680h160v80H280q-50 0-85 35t-35 85q0 50 35 85t85 35h160v80ZM320-440v-80h320v80H320Zm200 160v-80h160q50 0 85-35t35-85q0-50-35-85t-85-35H520v-80h160q83 0 141.5 58.5T880-480q0 83-58.5 141.5T680-280H520Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+export const leaderBoard = iconWrapper(
+  svg`<rect fill="none" height="24" width="24"/><g><path d="M16,11V3H8v6H2v12h20V11H16z M10,5h4v14h-4V5z M4,11h4v8H4V11z M20,19h-4v-6h4V19z"/></g>`
+)
+export const menu = iconWrapper(svg`<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>`)
+export const moreVert = iconWrapper(
+  svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`
+)
+export const openInNew = iconWrapper(
+  svg`<path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path>`
+)
+export const personAdd = iconWrapper(
+  svg`<g><rect fill="none" height="24" width="24"/></g><g><path d="M20,9V6h-2v3h-3v2h3v3h2v-3h3V9H20z M9,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4S5,5.79,5,8C5,10.21,6.79,12,9,12z M9,6 c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2S7,9.1,7,8C7,6.9,7.9,6,9,6z M15.39,14.56C13.71,13.7,11.53,13,9,13c-2.53,0-4.71,0.7-6.39,1.56 C1.61,15.07,1,16.1,1,17.22V20h16v-2.78C17,16.1,16.39,15.07,15.39,14.56z M15,18H3v-0.78c0-0.38,0.2-0.72,0.52-0.88 C4.71,15.73,6.63,15,9,15c2.37,0,4.29,0.73,5.48,1.34C14.8,16.5,15,16.84,15,17.22V18z"/></g>`
+)
+export const playArrow = iconWrapper(
+  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/>`
+)
+export const project = iconWrapper(
+  svg`<path d="M160,32h0V160s0,0,0,0H32l0,0h0V32s0,0,0,0H160m0-12H32A12,12,0,0,0,20,32V160a12,12,0,0,0,12,12H160a12,12,0,0,0,12-12V32a12,12,0,0,0-12-12Z"/><circle cx="63" cy="63" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><circle cx="63" cy="96" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><circle cx="63" cy="129" r="9" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:8px"/><rect width="192" height="192" style="fill:none"/>`,
+  192,
+  192
+)
+export const remove = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13H5v-2h14v2z"/>`)
+export const rename = iconWrapper(
+  svg`<g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15,16 11,20 21,20 21,16"/><path d="M12.06,7.19L3,16.25V20h3.75l9.06-9.06L12.06,7.19z M5.92,18H5v-0.92l7.06-7.06l0.92,0.92L5.92,18z"/><path d="M18.71,8.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C16.17,4.09,15.92,4,15.66,4c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83 l3.75,3.75L18.71,8.04z"/></g></g>`
+)
+export const request = iconWrapper(
+  svg`<polygon points="136 136 56 136 32 96 56 56 136 56 160 96 136 136" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:12px"/><rect width="192" height="192" style="fill:none"/>`,
+  192,
+  192
+)
+export const restoreFromTrash = iconWrapper(
+  svg`<path d="M11 16h2v-4.15l1.6 1.55L16 12l-4-4-4 4 1.4 1.4 1.6-1.55Zm-4 5q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21ZM17 6H7v13h10ZM7 6v13Z"/>`
+)
+export const save = iconWrapper(
+  svg`<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>`
+)
+export const schema = iconWrapper(
+  svg`<path d="M83.31,32.21a8,8,0,0,0-5.66,2.34L22.34,89.86a8.63,8.63,0,0,0,0,11.8L77.65,157A8,8,0,0,0,89,145.65L39.07,95.76,89,45.86a8,8,0,0,0-5.66-13.65Z"/><path d="M108.9,32.53a8,8,0,0,0-5.66,13.65l49.9,49.9L103.24,146a8,8,0,0,0,11.32,11.32L169.87,102a8.63,8.63,0,0,0,0-11.8L114.56,34.87a8,8,0,0,0-5.66-2.34Z"/><rect width="192" height="192" style="fill:none"/>`,
+  192,
+  192
+)
+export const schemaEntity = iconWrapper(
+  svg`<path d="M18.6487 2.52625H5.37999C3.77874 2.52625 2.51999 3.785 2.51999 5.38625V18.6562C2.51999 20.2575 3.77874 21.5162 5.37999 21.5162H18.65C20.2512 21.5162 21.51 20.2575 21.51 18.6562V5.38625C21.51 3.785 20.2512 2.52625 18.65 2.52625H18.6487ZM20.365 18.6562C20.365 19.5712 19.5637 20.3725 18.6487 20.3725H5.37999C4.46499 20.3725 3.66374 19.5712 3.66374 18.6562V5.38625C3.66374 4.47125 4.46499 3.67 5.37999 3.67H18.65C19.565 3.67 20.3662 4.47125 20.3662 5.38625V18.6562H20.365Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.995 8.00125V16.0413H16.035V8.00125H7.995ZM7.80875 6.00125H16.2212C17.223 6.00125 18.035 6.8133 18.035 7.815V16.2275C18.035 17.2292 17.223 18.0413 16.2212 18.0413H7.80875C6.80704 18.0413 5.995 17.2292 5.995 16.2275V7.815C5.995 6.8133 6.80704 6.00125 7.80875 6.00125Z"/>`
+)
+export const schemaModel = iconWrapper(
+  svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M2.98749 14.685V9.25125C2.98874 9.22375 2.98999 9.1975 2.99249 9.17C3.06374 8.36 3.77749 7.7625 4.58749 7.83375H9.50374C10.1179 7.81052 10.6651 8.14988 10.9337 8.66393C10.9922 8.77572 11.0374 8.89578 11.0673 9.02216C11.0849 9.09647 11.0972 9.17296 11.1037 9.25125V14.685C11.1025 14.7125 11.1012 14.7388 11.0987 14.7663C11.0809 14.9685 11.0231 15.1574 10.9337 15.3261C10.6651 15.8329 10.1115 16.156 9.50374 16.1025H4.58874L4.5853 16.1028C4.55904 16.1052 4.53384 16.1075 4.50749 16.1075C3.76044 16.1316 3.12434 15.5957 3.00631 14.8777C2.99597 14.8148 2.9896 14.7504 2.98749 14.685ZM4.98749 14.1025H9.10374V9.83375H4.98749V14.1025ZM12.9387 3.81C13.01 3 13.7237 2.4025 14.5337 2.47375H19.45C20.2762 2.4425 20.9812 3.0675 21.05 3.89125V9.20625C21.0487 9.23375 21.0475 9.26 21.045 9.2875C20.9737 10.0975 20.26 10.695 19.45 10.6238H14.5337C13.9303 10.6238 13.3778 10.3678 13.1037 9.99058C12.9617 9.79506 12.8945 9.56695 12.9337 9.325V3.89125C12.935 3.86375 12.9362 3.8375 12.9387 3.81ZM14.9337 4.47375H19.05V8.62375H14.9337V4.47375ZM13.1037 13.9702C13.0144 14.1388 12.9565 14.3278 12.9387 14.53C12.9362 14.5575 12.935 14.5838 12.9337 14.6113V20.045C12.8187 20.8713 13.6175 21.4625 14.5337 21.4625H19.45C20.26 21.5338 20.9737 20.9363 21.045 20.1263C21.0475 20.0988 21.0487 20.0725 21.05 20.045V14.6113C20.9812 13.7875 20.2762 13.1625 19.45 13.1938H14.5337C13.926 13.1403 13.3724 13.4633 13.1037 13.9702ZM19.05 15.1938H14.9337V19.4625H19.05V15.1938ZM14.5109 19.4602C14.5109 19.46 14.5138 19.4603 14.5192 19.4619C14.5135 19.4613 14.5108 19.4605 14.5109 19.4602Z"/>`
+)
+
+export const schemaNamespace = iconWrapper(
+  svg`<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4V8H8V4H4ZM3 2C2.44772 2 2 2.44772 2 3V9C2 9.55228 2.44772 10 3 10H9C9.55228 10 10 9.55228 10 9V3C10 2.44772 9.55228 2 9 2H3Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16 16V20H20V16H16ZM15 14C14.4477 14 14 14.4477 14 15V21C14 21.5523 14.4477 22 15 22H21C21.5523 22 22 21.5523 22 21V15C22 14.4477 21.5523 14 21 14H15Z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4 16V20H8V16H4ZM3 14C2.44772 14 2 14.4477 2 15V21C2 21.5523 2.44772 22 3 22H9C9.55228 22 10 21.5523 10 21V15C10 14.4477 9.55228 14 9 14H3Z"/>
+  <path d="M17.5 11.5357C17.5 11.7921 17.7239 12 18 12C18.2761 12 18.5 11.7921 18.5 11.5357V5.96429C18.5 5.83864 18.4463 5.72465 18.3589 5.64106C18.2754 5.55375 18.1614 5.5 18.0357 5.5H12.4643C12.2079 5.5 12 5.72386 12 6C12 6.27614 12.2079 6.5 12.4643 6.5H17.5V11.5357Z"/>`
+)
+
+export const search = iconWrapper(
+  svg`<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>`
+)
+export const send = iconWrapper(svg`<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>`)
+export const settings = iconWrapper(
+  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>`
+)
+export const space = iconWrapper(
+  svg`<path d="M62.14,110.18a11.26,11.26,0,1,1-11.27,11.26,11.29,11.29,0,0,1,11.27-11.26m0-11.27a22.53,22.53,0,1,0,22.52,22.53A22.6,22.6,0,0,0,62.14,98.91Zm33.78-45A11.26,11.26,0,1,1,84.66,65.13,11.3,11.3,0,0,1,95.92,53.87m0-11.26a22.52,22.52,0,1,0,22.52,22.52A22.58,22.58,0,0,0,95.92,42.61Zm33.78,67.57a11.26,11.26,0,1,1-11.26,11.26,11.28,11.28,0,0,1,11.26-11.26m0-11.27a22.53,22.53,0,1,0,22.53,22.53A22.6,22.6,0,0,0,129.7,98.91Z"/><rect width="192" height="192" style="fill:none"/>`,
+  192,
+  192
+)
+export const taskAlt = iconWrapper(
+  svg`<rect fill="none" height="24" width="24"/><path d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12 c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12 c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z"/>`
+)
+export const timeline = iconWrapper(
+  svg`<path d="M3 18Q2.175 18 1.588 17.413Q1 16.825 1 16Q1 15.175 1.588 14.587Q2.175 14 3 14Q3.15 14 3.263 14Q3.375 14 3.5 14.05L8.05 9.5Q8 9.375 8 9.262Q8 9.15 8 9Q8 8.175 8.588 7.587Q9.175 7 10 7Q10.825 7 11.413 7.587Q12 8.175 12 9Q12 9.05 11.95 9.5L14.5 12.05Q14.625 12 14.738 12Q14.85 12 15 12Q15.15 12 15.262 12Q15.375 12 15.5 12.05L19.05 8.5Q19 8.375 19 8.262Q19 8.15 19 8Q19 7.175 19.587 6.588Q20.175 6 21 6Q21.825 6 22.413 6.588Q23 7.175 23 8Q23 8.825 22.413 9.412Q21.825 10 21 10Q20.85 10 20.738 10Q20.625 10 20.5 9.95L16.95 13.5Q17 13.625 17 13.738Q17 13.85 17 14Q17 14.825 16.413 15.412Q15.825 16 15 16Q14.175 16 13.588 15.412Q13 14.825 13 14Q13 13.85 13 13.738Q13 13.625 13.05 13.5L10.5 10.95Q10.375 11 10.262 11Q10.15 11 10 11Q9.95 11 9.5 10.95L4.95 15.5Q5 15.625 5 15.738Q5 15.85 5 16Q5 16.825 4.412 17.413Q3.825 18 3 18Z"/>`
+)
+export const tune = iconWrapper(
+  svg`<path d="M440 936V696h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160V216h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+export const viewGrid = iconWrapper(
+  svg`<rect fill="none" height="24" width="24"/><path d="M3,5v14h18V5H3z M7,7v2H5V7H7z M5,13v-2h2v2H5z M5,15h2v2H5V15z M19,17H9v-2h10V17z M19,13H9v-2h10V13z M19,9H9V7h10V9z"/>`
+)
+export const viewList = iconWrapper(
+  svg`<g><rect fill="none" height="24" width="24"/></g><path d="M3,3v8h8V3H3z M9,9H5V5h4V9z M3,13v8h8v-8H3z M9,19H5v-4h4V19z M13,3v8h8V3H13z M19,9h-4V5h4V9z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z"/>`
+)
+export const visibility = iconWrapper(
+  svg`<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"></path>`
+)
+export const visibilityOff = iconWrapper(
+  svg`<path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"></path>`
+)
+export const warning = iconWrapper(svg`<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>`)
+
+export const textFields = iconWrapper(
+  svg`<path d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+
+export const number = iconWrapper(
+  svg`<path d="M220-360v-180h-60v-60h120v240h-60Zm140 0v-100q0-17 11.5-28.5T400-500h80v-40H360v-60h140q17 0 28.5 11.5T540-560v60q0 17-11.5 28.5T500-460h-80v40h120v60H360Zm240 0v-60h120v-40h-80v-40h80v-40H600v-60h140q17 0 28.5 11.5T780-560v160q0 17-11.5 28.5T740-360H600Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+
+export const calendarToday = iconWrapper(
+  svg`<path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+
+export const schedule = iconWrapper(
+  svg`<path d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)
+
+export const event = iconWrapper(
+  svg`<path d="M580-240q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/>`,
+  960,
+  960,
+  0,
+  -960
+)

package/src/md/icons/internals/Icon.styles.ts

@@ -0,0 +1,10 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+  }
+`

package/src/md/icons/internals/Icon.ts

@@ -0,0 +1,57 @@
+/*
+Copyright 2022 Pawel Psztyc
+Licensed under the CC-BY 2.0
+*/
+import { html, TemplateResult, LitElement, SVGTemplateResult, PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+import * as Icons from '../Icons.js'
+import { IconType } from '../Icons.js'
+
+export default class UiIcon extends LitElement {
+  private hasIconInternal = false
+
+  private iconValue: SVGTemplateResult | undefined
+
+  /**
+   * An icon to be rendered from the ApiIcons library.
+   * When incorrect icon is referenced nothing is rendered.
+   * @attribute
+   */
+  @property() accessor icon: IconType | undefined
+
+  /**
+   * @returns True when the icon was found and is rendered.
+   */
+  get hasIcon(): boolean {
+    return this.hasIconInternal
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('icon')) {
+      this.updateIcon(this.icon)
+    }
+  }
+
+  /**
+   * Maps icon name to it's definition and sets `hasIcon` value.
+   *
+   * @param name Icon name
+   */
+  protected updateIcon(name: IconType | undefined): void {
+    const icon = (Icons as never)[name as IconType] as SVGTemplateResult | undefined
+    this.hasIconInternal = !!icon
+    this.iconValue = icon
+    this.requestUpdate()
+  }
+
+  /**
+   * @return Template result for an icon
+   */
+  override render(): TemplateResult {
+    const { hasIcon, iconValue: _iconValue } = this
+    if (!hasIcon) {
+      return html`<slot></slot>`
+    }
+    return html`${_iconValue}`
+  }
+}

package/src/md/icons/ui-icon.ts

@@ -0,0 +1,15 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/Icon.js'
+import styles from './internals/Icon.styles.js'
+
+@customElement('ui-icon')
+export class UiIconElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-icon': Element
+  }
+}