-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.ts
70 lines (57 loc) · 1.38 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { CSSResultGroup, LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { WebComponentsBase } from '../base';
import { IconSizes } from './types';
const WebComponentsBaseElement = WebComponentsBase(LitElement);
const styles: CSSResultGroup[] = [WebComponentsBaseElement.styles];
@customElement('superviz-icon')
export class Icon extends WebComponentsBaseElement {
declare name: string;
declare size: string;
declare color: 'white' | 'black';
declare suffix: string;
constructor() {
super();
this.name = '';
this.size = 'md';
}
static properties = {
name: { type: String },
size: { type: String },
color: { type: String },
suffix: { type: String },
};
private get iconSize(): string {
return IconSizes[this.size];
}
static styles = [
styles,
css`
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
color: white;
}
i,
i.black {
color: rgba(var(--sv-gray-600));
}
i.white {
color: white;
}
`,
];
protected render() {
this.color ||= 'black';
return html`
<i
class="sv-icon sv-icon-${this.name}_${this.suffix ?? this.size} ${this.color}"
style="font-size: ${this.iconSize}px"
></i>
`;
}
}