ui/src/icon/index.js

/**
 * {图标组件}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/03/06 15:17:25
 */

import { css, svg, html, Component } from '@bd/core'

import SVG_DICT from './svg.js'

let dict = SVG_DICT
if (window.EXT_SVG_DICT) {
  Object.assign(dict, EXT_SVG_DICT)
}

class Icon extends Component {
  static props = {
    is: ''
  }

  static styles = css`
    :host {
      display: inline-flex;
      width: var(--size, 36px);
      height: var(--size, 36px);
    }
    :host(:not([is])) {
      display: none;
    }
    .icon {
      display: block;
      width: 100%;
      height: 100%;
      color: inherit;
      fill: currentColor;

      &.loading {
        animation: load 1.5s linear infinite;
      }

      circle {
        stroke: currentColor;
        animation: circle 1.5s ease-in-out infinite;
      }
    }
    $gaps: (
      's': 20px,
      'm': 24px,
      'l': 32px,
      'xl': 36px,
      'xxl': 44px,
      'xxxl': 52px,
      'xxxxl': 64px
    );

    @loop $k, $v in $gaps {
      :host([size='#{$k}']) {
        width: $v;
        height: $v;
      }
    }

    @keyframes circle {
      0% {
        stroke-dasharray: 0, 3812px;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 1906px, 3812px;
        stroke-dashoffset: -287px;
      }
      100% {
        stroke-dasharray: 1906px, 3812px;
        stroke-dashoffset: -2393px;
      }
    }

    @keyframes load {
      to {
        transform: rotate(360deg);
      }
    }
  `

  render() {
    return html`
      <svg
        class="icon ${this.is === 'loading' ? 'loading' : ''}"
        viewBox="0 0 1024 1024"
      >
        ${this.is === 'loading'
          ? svg`<circle class="circle" cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
          : svg`<path d="${dict[this.is]}" />`}
      </svg>
    `
  }
}

customElements.define('wc-icon', Icon)