dynamic-icon.tsx

1'use client'
2
3import {
4	SiBluesky,
5	SiDiscord,
6	SiGithub,
7	SiJavascript,
8	SiTypescript,
9	SiPython,
10	SiRust,
11	SiHtml5,
12	SiTailwindcss,
13	SiAstro,
14	SiNuxtdotjs,
15	SiVim,
16	SiGooglecloud,
17} from '@icons-pack/react-simple-icons'
18import { GitBranch, Heart } from 'lucide-react'
19
20export const iconMap = {
21	// Simple Icons
22	SiBluesky,
23	SiDiscord,
24	SiGithub,
25	SiJavascript,
26	SiTypescript,
27	SiPython,
28	SiRust,
29	SiHtml5,
30	SiTailwindcss,
31	SiAstro,
32	SiNuxtdotjs,
33	SiVim,
34	SiGooglecloud,
35	// Lucide Icons
36	GitBranch,
37	Heart,
38}
39
40export type IconName = keyof typeof iconMap
41
42interface Props {
43	name: IconName
44	size?: number
45	color?: string
46	className?: string
47}
48
49export function DynamicIcon({ name, size = 24, color, className }: Props) {
50	const Icon = iconMap[name]
51	if (!Icon) return null
52
53	return (
54		<Icon
55			size={size}
56			style={{ color: color || 'inherit' }}
57			className={className}
58		/>
59	)
60}
61