(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
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} from "lucide-react";
43
44const ICON_MAP = {
45 folder: Folder,
46 star: Star,
47 heart: Heart,
48 bookmark: Bookmark,
49 lightbulb: Lightbulb,
50 zap: Zap,
51 coffee: Coffee,
52 music: Music,
53 camera: Camera,
54 code: Code,
55 globe: Globe,
56 flag: Flag,
57 tag: Tag,
58 box: Box,
59 archive: Archive,
60 file: FileText,
61 image: Image,
62 video: Video,
63 mail: Mail,
64 pin: MapPin,
65 calendar: Calendar,
66 clock: Clock,
67 search: Search,
68 settings: Settings,
69 user: User,
70 users: Users,
71 home: Home,
72 briefcase: Briefcase,
73 gift: Gift,
74 award: Award,
75 target: Target,
76 trending: TrendingUp,
77 activity: Activity,
78 cpu: Cpu,
79 database: Database,
80 cloud: Cloud,
81 sun: Sun,
82 moon: Moon,
83 flame: Flame,
84 leaf: Leaf,
85};
86
87export default function CollectionIcon({ icon, size = 22, className = "" }) {
88 if (!icon) {
89 return <Folder size={size} className={className} />;
90 }
91
92 if (icon === "icon:semble") {
93 return (
94 <img
95 src="/semble-logo.svg"
96 alt="Semble"
97 style={{ width: size, height: size, objectFit: "contain" }}
98 className={className}
99 />
100 );
101 }
102
103 if (icon.startsWith("icon:")) {
104 const iconName = icon.replace("icon:", "");
105 const IconComponent = ICON_MAP[iconName];
106 if (IconComponent) {
107 return <IconComponent size={size} className={className} />;
108 }
109 return <Folder size={size} className={className} />;
110 }
111
112 return (
113 <span style={{ fontSize: `${size * 0.065}rem`, lineHeight: 1 }}>
114 {icon}
115 </span>
116 );
117}