vielle.dev
Personal Site
Load feeds and icons properly, with support for svg or image icons
+23
-6
src/components/home/feeds/Feeds.astro
+23
-6
src/components/home/feeds/Feeds.astro
···
1
1
---
2
+
import Bluesky from "./Bluesky.astro";
3
+
import Tumblr from "./Tumblr.astro";
4
+
import Tangled from "./Tangled.astro";
5
+
import Github from "./Github.astro";
6
+
7
+
import IconBluesky from "/assets/icons/Bluesky.svg";
8
+
import IconTumblr from "/assets/icons/Tumblr.svg";
9
+
import IconGit from "/assets/icons/Git.svg";
10
+
import IconGithub from "/assets/icons/GitHub.svg";
11
+
2
12
const tabs: {
3
13
id: string;
4
14
label: string;
5
-
content: string;
15
+
icon?: ((_props: astroHTML.JSX.SVGAttributes) => any) | string;
16
+
content: (_props: Record<string, any>) => any;
6
17
}[] = [
7
-
{ id: "tab1", label: "Tab 1", content: "Tab 1 Contents" },
8
-
{ id: "tab2", label: "Tab 2", content: "Tab 2 Contents" },
9
-
{ id: "tab3", label: "Tab 3", content: "Tab 3 Contents" },
10
-
{ id: "tab4", label: "Tab 4", content: "Tab 4 Contents" },
18
+
{ id: "tab1", label: "Tab 1", icon: IconBluesky, content: Bluesky },
19
+
{ id: "tab2", label: "Tab 2", icon: IconTumblr, content: Tumblr },
20
+
{ id: "tab3", label: "Tab 3", icon: IconGit, content: Tangled },
21
+
{ id: "tab4", label: "Tab 4", icon: IconGithub, content: Github },
11
22
];
12
23
---
13
24
···
22
33
data-tab-for={tab.id}
23
34
checked={i === 0}
24
35
/>
36
+
{tab.icon &&
37
+
(typeof tab.icon === "string" ? (
38
+
<img src={tab.icon} alt="" />
39
+
) : (
40
+
<tab.icon />
41
+
))}
25
42
{tab.label}
26
43
</label>
27
44
))
···
32
49
{
33
50
tabs.map((tab) => (
34
51
<div class="tab" data-tab={tab.id} id={tab.id}>
35
-
{tab.content}
52
+
<tab.content />
36
53
</div>
37
54
))
38
55
}