WIP PWA for Grain
feat: add grain-icon atom component
+59
+59
src/components/atoms/grain-icon.js
+59
src/components/atoms/grain-icon.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
const ICONS = {
4
+
heart: html`<path d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.152 14.081 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938z"/>`,
5
+
heartFilled: html`<path fill="currentColor" d="M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.152 14.081 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.84 1.175.98 1.763 1.12 1.763s.278-.588 1.11-1.766a4.17 4.17 0 0 1 3.679-1.938z"/>`,
6
+
comment: html`<path d="M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22l-1.344-4.992z"/>`,
7
+
share: html`<path d="M22 3 9.218 10.083M11.698 20.334 22 3.001H2l7.218 7.083 2.48 10.25z"/>`,
8
+
bookmark: html`<path d="M20 21V5a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v16l8-3 8 3z"/>`
9
+
};
10
+
11
+
export class GrainIcon extends LitElement {
12
+
static properties = {
13
+
name: { type: String },
14
+
size: { type: Number }
15
+
};
16
+
17
+
static styles = css`
18
+
:host {
19
+
display: inline-flex;
20
+
align-items: center;
21
+
justify-content: center;
22
+
}
23
+
svg {
24
+
display: block;
25
+
fill: none;
26
+
stroke: currentColor;
27
+
stroke-width: 1.5;
28
+
stroke-linecap: round;
29
+
stroke-linejoin: round;
30
+
}
31
+
svg.filled {
32
+
fill: currentColor;
33
+
stroke: none;
34
+
}
35
+
`;
36
+
37
+
constructor() {
38
+
super();
39
+
this.size = 24;
40
+
}
41
+
42
+
render() {
43
+
const icon = ICONS[this.name];
44
+
const isFilled = this.name?.includes('Filled');
45
+
46
+
return html`
47
+
<svg
48
+
class=${isFilled ? 'filled' : ''}
49
+
width=${this.size}
50
+
height=${this.size}
51
+
viewBox="0 0 24 24"
52
+
>
53
+
${icon}
54
+
</svg>
55
+
`;
56
+
}
57
+
}
58
+
59
+
customElements.define('grain-icon', GrainIcon);