• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import {BaseElement} from '../BaseElement.js';
16
17export class LitIcon extends BaseElement {
18  static get observedAttributes() {
19    return ['name', 'size', 'color', 'path'];
20  }
21
22  get name() {
23    return this.getAttribute('name') || '';
24  }
25
26  set name(value) {
27    this._name = value;
28    this.setAttribute('name', value);
29  }
30
31  get size() {
32    return parseInt(this.getAttribute('size') || '0', 10);
33  }
34
35  set size(value) {
36    this._size = value;
37    this.setAttribute('size', `${value}`);
38  }
39
40  set color(value) {
41    this._color = value;
42    this.setAttribute('color', value);
43  }
44
45  set path(value) {
46    this._path = value;
47    this.setAttribute('path', value);
48  }
49
50  initHtml() {
51    return `
52            <style>
53                :host{
54                    display: inline-block;
55                    font-size: inherit;
56                 }
57                 .icon{
58                    width: 1em;
59                    height: 1em;
60                    display: block;
61                    fill: currentColor;
62                    overflow: hidden;
63                    margin: auto;
64                 }
65                 @keyframes rotate {
66                    to{
67                        transform: rotate(360deg);
68                    }
69                 }
70                 :host([spin]){
71                    animation: rotate 1.75s linear infinite;
72                 }
73            </style>
74            <svg class="icon" id="icon" aria-hidden="true" viewBox="0 0 ${this.view || 1024} ${this.view || 1024}">
75                 ${this._path ? '<path id="path"></path>' : '<use id="use"></use>'}
76            </svg>
77            `;
78  }
79
80  initElements() {
81    if (this.shadowRoot) {
82      this.icon = this.shadowRoot.getElementById('icon');
83      this.use = this.shadowRoot.querySelector('use');
84      this.d = this.shadowRoot.querySelector('path');
85    }
86  }
87
88  attributeChangedCallback(name, oldValue, value) {
89    switch (name) {
90      case 'name':
91        if (this.use) {
92          this.use.href.baseVal = `./base-ui/icon.svg#icon-${value}`;
93        }
94        break;
95      case 'path':
96        if (this.d) {
97          this.d.setAttribute('d', value);
98        }
99        break;
100      case 'color':
101        if (this.icon) {
102          this.icon.style.color = value;
103        }
104        break;
105      case 'size':
106        if (this.icon) {
107          this.icon.style.fontSize = `${value}px`;
108        }
109        break;
110    }
111  }
112}
113
114if (!customElements.get('lit-icon')) {
115  customElements.define('lit-icon', LitIcon);
116}
117