WIP PWA for Grain
feat: switch to Font Awesome for icons
+35
-24
+10
package-lock.json
+10
package-lock.json
···
9
9
"version": "1.0.0",
10
10
"license": "ISC",
11
11
"dependencies": {
12
+
"@fortawesome/fontawesome-free": "^7.1.0",
12
13
"lit": "^3.3.2"
13
14
},
14
15
"devDependencies": {
···
455
456
],
456
457
"engines": {
457
458
"node": ">=18"
459
+
}
460
+
},
461
+
"node_modules/@fortawesome/fontawesome-free": {
462
+
"version": "7.1.0",
463
+
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.1.0.tgz",
464
+
"integrity": "sha512-+WxNld5ZCJHvPQCr/GnzCTVREyStrAJjisUPtUxG5ngDA8TMlPnKp6dddlTpai4+1GNmltAeuk1hJEkBohwZYA==",
465
+
"license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
466
+
"engines": {
467
+
"node": ">=6"
458
468
}
459
469
},
460
470
"node_modules/@lit-labs/ssr-dom-shim": {
+1
package.json
+1
package.json
+21
-24
src/components/atoms/grain-icon.js
+21
-24
src/components/atoms/grain-icon.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import fontAwesomeStyles from '@fortawesome/fontawesome-free/css/all.min.css?inline';
2
3
3
4
const ICONS = {
4
-
heart: html`<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
5
-
heartFilled: html`<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
6
-
comment: html`<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>`,
7
-
share: html`<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>`
5
+
heart: 'fa-regular fa-heart',
6
+
heartFilled: 'fa-solid fa-heart',
7
+
comment: 'fa-regular fa-comment',
8
+
share: 'fa-solid fa-paper-plane'
8
9
};
9
10
10
11
export class GrainIcon extends LitElement {
···
19
20
align-items: center;
20
21
justify-content: center;
21
22
}
22
-
svg {
23
+
i {
23
24
display: block;
24
-
fill: none;
25
-
stroke: currentColor;
26
-
stroke-width: 1.5;
27
-
stroke-linecap: round;
28
-
stroke-linejoin: round;
29
-
}
30
-
svg.filled {
31
-
fill: currentColor;
32
-
stroke: none;
25
+
color: inherit;
33
26
}
34
27
`;
35
28
···
38
31
this.size = 24;
39
32
}
40
33
34
+
connectedCallback() {
35
+
super.connectedCallback();
36
+
// Inject Font Awesome styles into shadow DOM
37
+
if (!this.shadowRoot.querySelector('#fa-styles')) {
38
+
const style = document.createElement('style');
39
+
style.id = 'fa-styles';
40
+
style.textContent = fontAwesomeStyles;
41
+
this.shadowRoot.appendChild(style);
42
+
}
43
+
}
44
+
41
45
render() {
42
-
const icon = ICONS[this.name];
43
-
const isFilled = this.name?.includes('Filled');
46
+
const iconClass = ICONS[this.name] || '';
47
+
const fontSize = `${this.size}px`;
44
48
45
49
return html`
46
-
<svg
47
-
class=${isFilled ? 'filled' : ''}
48
-
width=${this.size}
49
-
height=${this.size}
50
-
viewBox="0 0 24 24"
51
-
>
52
-
${icon}
53
-
</svg>
50
+
<i class=${iconClass} style="font-size: ${fontSize}"></i>
54
51
`;
55
52
}
56
53
}