icon

1---
2import type { HTMLAttributes } from "astro/types"
3 
4type Props = Omit<HTMLAttributes<"svg">, "name" | "href"> & {
5  href?: HTMLAttributes<"a">["href"]
6  name?: string | number | null
7}
8 
9const { name, href, ...props } = Astro.props
10 
11const hrefMap = {
12  "x.com": "x",
13  twitter: "twitter",
14  facebook: "facebook",
15  instagram: "instagram",
16  pinterest: "pinterest",
17  youtube: "youtube",
18  tiktok: "tiktok",
19  snapchat: "snapchat",
20  reddit: "reddit",
21  tumblr: "tumblr",
22  "wa.me": "whatsapp",
23  telegram: "telegram",
24  discord: "discord",
25  vimeo: "vimeo",
26  flickr: "flickr",
27  yelp: "yelp",
28  spotify: "spotify",
29  behance: "behance",
30  dribbble: "dribbble",
31  soundcloud: "soundcloud",
32  github: "github",
33  twitch: "twitch",
34  "tel:": "phone",
35  "mailto:": "mail",
36  "maps.app.goo.gl": "map-pin",
37  linkedin: "linkedin",
38} as const
39 
40const icons = import.meta.glob(
41  [
42    "/node_modules/lucide-static/icons/*.svg",
43    "/node_modules/simple-icons/icons/*.svg",
44  ],
45  { eager: true }
46) as Record<string, { default: any }>
47 
48const foundPath = () => {
49  let foundPath: string | undefined = undefined
50 
51  // For x.com, use the Simple Icons X instead of Lucide's X icon.
52  if (name === "x.com") {
53    foundPath = "/node_modules/simple-icons/icons/x.svg"
54  } else if (name) {
55    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))
56  } else if (href) {
57    const hrefKey = Object.keys(hrefMap).find((key) =>
58      href.toString().includes(key)
59    )
60    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]
61    foundPath = Object.keys(icons)
62      .reverse()
63      .find((key) => key.includes(`/${hrefValue}.svg`))
64  }
65 
66  return foundPath
67}
68 
69const iconPath = foundPath()
70const module = iconPath ? icons[iconPath] : undefined
71const Comp = module?.default
72---
73 
74{
75  Comp && foundPath()?.includes("simple-icons") && (
76    <Comp
77      height={24}
78      width={24}
79      fill="currentColor"
80      class="size-[1em] text-base"
81      {...props}
82    />
83  )
84}
85 
86{
87  Comp && foundPath()?.includes("lucide-static") && (
88    <Comp
89      height={24}
90      width={24}
91      fill="none"
92      class="size-[1em] text-base"
93      {...props}
94    />
95  )
96}