margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
scanash.com
1import {
2 Folder,
3 Star,
4 Heart,
5 Bookmark,
6 Lightbulb,
7 Zap,
8 Coffee,
9 Music,
10 Camera,
11 Code,
12 Globe,
13 Flag,
14 Tag,
15 Box,
16 Archive,
17 FileText,
18 Image,
19 Video,
20 Mail,
21 MapPin,
22 Calendar,
23 Clock,
24 Search,
25 Settings,
26 User,
27 Users,
28 Home,
29 Briefcase,
30 Gift,
31 Award,
32 Target,
33 TrendingUp,
34 Activity,
35 Cpu,
36 Database,
37 Cloud,
38 Sun,
39 Moon,
40 Flame,
41 Leaf,
42 type LucideIcon,
43} from 'lucide-react';
44
45const ICON_MAP: Record<string, LucideIcon> = {
46 folder: Folder,
47 star: Star,
48 heart: Heart,
49 bookmark: Bookmark,
50 lightbulb: Lightbulb,
51 zap: Zap,
52 coffee: Coffee,
53 music: Music,
54 camera: Camera,
55 code: Code,
56 globe: Globe,
57 flag: Flag,
58 tag: Tag,
59 box: Box,
60 archive: Archive,
61 file: FileText,
62 image: Image,
63 video: Video,
64 mail: Mail,
65 pin: MapPin,
66 calendar: Calendar,
67 clock: Clock,
68 search: Search,
69 settings: Settings,
70 user: User,
71 users: Users,
72 home: Home,
73 briefcase: Briefcase,
74 gift: Gift,
75 award: Award,
76 target: Target,
77 trending: TrendingUp,
78 activity: Activity,
79 cpu: Cpu,
80 database: Database,
81 cloud: Cloud,
82 sun: Sun,
83 moon: Moon,
84 flame: Flame,
85 leaf: Leaf,
86};
87
88interface CollectionIconProps {
89 icon?: string;
90 size?: number;
91 className?: string;
92}
93
94export default function CollectionIcon({ icon, size = 18, className = '' }: CollectionIconProps) {
95 if (!icon) {
96 return <Folder size={size} className={className} />;
97 }
98
99 if (icon === 'icon:semble') {
100 return (
101 <img
102 src="/icons/semble-logo.svg"
103 alt="Semble"
104 style={{ width: size, height: size, objectFit: 'contain' }}
105 className={className}
106 />
107 );
108 }
109
110 if (icon.startsWith('icon:')) {
111 const iconName = icon.replace('icon:', '');
112 const IconComponent = ICON_MAP[iconName];
113 if (IconComponent) {
114 return <IconComponent size={size} className={className} />;
115 }
116 return <Folder size={size} className={className} />;
117 }
118
119 return (
120 <span style={{ fontSize: `${size * 0.065}rem`, lineHeight: 1 }} className={className}>
121 {icon}
122 </span>
123 );
124}