(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import React from "react";
2import { Folder } from "lucide-react";
3import { ICON_MAP } from "./iconMap";
4
5interface CollectionIconProps {
6 icon?: string;
7 size?: number;
8 className?: string;
9}
10
11export default function CollectionIcon({
12 icon,
13 size = 22,
14 className = "",
15}: CollectionIconProps) {
16 if (!icon) {
17 return <Folder size={size} className={className} />;
18 }
19
20 if (icon === "icon:semble") {
21 return (
22 <img
23 src="/semble-logo.svg"
24 alt="Semble"
25 style={{ width: size, height: size, objectFit: "contain" }}
26 className={className}
27 />
28 );
29 }
30
31 if (icon.startsWith("icon:")) {
32 const iconName = icon.replace("icon:", "");
33 const IconComponent = ICON_MAP[iconName];
34 if (IconComponent) {
35 return <IconComponent size={size} className={className} />;
36 }
37 return <Folder size={size} className={className} />;
38 }
39
40 return (
41 <span
42 style={{ fontSize: `${size * 0.8}px`, lineHeight: 1 }}
43 className={className}
44 >
45 {icon}
46 </span>
47 );
48}