223 lines
4.5 KiB
TypeScript
223 lines
4.5 KiB
TypeScript
import { CURRENT_DIGITAL_VISUAL_THEME } from "@/config/digital/visual-theme.config";
|
|
import type { ReactNode } from "react";
|
|
|
|
export type IconName =
|
|
| "app"
|
|
| "book"
|
|
| "briefcase"
|
|
| "camera"
|
|
| "card"
|
|
| "check"
|
|
| "cloud"
|
|
| "compass"
|
|
| "course"
|
|
| "file"
|
|
| "globe"
|
|
| "home"
|
|
| "map"
|
|
| "music"
|
|
| "phone"
|
|
| "play"
|
|
| "server"
|
|
| "shopping"
|
|
| "spark"
|
|
| "tool"
|
|
| "user"
|
|
| "video"
|
|
| "wallet";
|
|
|
|
type DigitalThemeIconProps = {
|
|
name: IconName;
|
|
emoji: string;
|
|
className?: string;
|
|
decorative?: boolean;
|
|
};
|
|
|
|
const paths: Record<IconName, ReactNode> = {
|
|
app: (
|
|
<>
|
|
<rect x="7" y="3" width="10" height="18" rx="2" />
|
|
<path d="M10 18h4" />
|
|
</>
|
|
),
|
|
book: (
|
|
<>
|
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
|
<path d="M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z" />
|
|
<path d="M8 6h8" />
|
|
</>
|
|
),
|
|
camera: (
|
|
<>
|
|
<path d="M14.5 5 13 3H9L7.5 5H5a2 2 0 0 0-2 2v12h18V7a2 2 0 0 0-2-2h-4.5z" />
|
|
<circle cx="12" cy="13" r="4" />
|
|
</>
|
|
),
|
|
card: (
|
|
<>
|
|
<rect x="3" y="5" width="18" height="14" rx="2" />
|
|
<path d="M3 10h18" />
|
|
<path d="M7 15h3" />
|
|
</>
|
|
),
|
|
briefcase: (
|
|
<>
|
|
<path d="M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1" />
|
|
<rect x="3" y="6" width="18" height="15" rx="2" />
|
|
<path d="M3 12h18" />
|
|
</>
|
|
),
|
|
check: (
|
|
<>
|
|
<path d="M20 6 9 17l-5-5" />
|
|
</>
|
|
),
|
|
cloud: (
|
|
<>
|
|
<path d="M17.5 19H7a5 5 0 1 1 1.2-9.85A6.5 6.5 0 0 1 20 12.5 3.5 3.5 0 0 1 17.5 19z" />
|
|
</>
|
|
),
|
|
compass: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="m15.5 8.5-2 5-5 2 2-5 5-2z" />
|
|
</>
|
|
),
|
|
course: (
|
|
<>
|
|
<path d="m3 7 9-4 9 4-9 4-9-4z" />
|
|
<path d="M21 10v6" />
|
|
<path d="M7 10.5V16c0 1.7 2.7 3 5 3s5-1.3 5-3v-5.5" />
|
|
</>
|
|
),
|
|
file: (
|
|
<>
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
|
|
<path d="M14 2v6h6" />
|
|
<path d="M8 13h8" />
|
|
<path d="M8 17h6" />
|
|
</>
|
|
),
|
|
globe: (
|
|
<>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M3 12h18" />
|
|
<path d="M12 3a13 13 0 0 1 0 18" />
|
|
<path d="M12 3a13 13 0 0 0 0 18" />
|
|
</>
|
|
),
|
|
home: (
|
|
<>
|
|
<path d="m3 11 9-8 9 8" />
|
|
<path d="M5 10v10h14V10" />
|
|
<path d="M9 20v-6h6v6" />
|
|
</>
|
|
),
|
|
map: (
|
|
<>
|
|
<path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6z" />
|
|
<path d="M9 3v15" />
|
|
<path d="M15 6v15" />
|
|
</>
|
|
),
|
|
music: (
|
|
<>
|
|
<path d="M9 18V5l12-2v13" />
|
|
<circle cx="6" cy="18" r="3" />
|
|
<circle cx="18" cy="16" r="3" />
|
|
</>
|
|
),
|
|
phone: (
|
|
<>
|
|
<rect x="7" y="3" width="10" height="18" rx="2" />
|
|
<path d="M11 18h2" />
|
|
</>
|
|
),
|
|
play: (
|
|
<>
|
|
<rect x="3" y="5" width="18" height="14" rx="2" />
|
|
<path d="m10 9 5 3-5 3V9z" />
|
|
</>
|
|
),
|
|
server: (
|
|
<>
|
|
<rect x="4" y="4" width="16" height="7" rx="2" />
|
|
<rect x="4" y="13" width="16" height="7" rx="2" />
|
|
<path d="M8 8h.01" />
|
|
<path d="M8 17h.01" />
|
|
</>
|
|
),
|
|
shopping: (
|
|
<>
|
|
<path d="M6 7h15l-2 8H8L6 3H3" />
|
|
<circle cx="9" cy="20" r="1" />
|
|
<circle cx="18" cy="20" r="1" />
|
|
</>
|
|
),
|
|
spark: (
|
|
<>
|
|
<path d="M12 2v6" />
|
|
<path d="M12 16v6" />
|
|
<path d="M4.93 4.93 9.17 9.17" />
|
|
<path d="m14.83 14.83 4.24 4.24" />
|
|
<path d="M2 12h6" />
|
|
<path d="M16 12h6" />
|
|
<path d="m4.93 19.07 4.24-4.24" />
|
|
<path d="m14.83 9.17 4.24-4.24" />
|
|
</>
|
|
),
|
|
tool: (
|
|
<>
|
|
<path d="M14.7 6.3a4 4 0 0 0-5.2 5.2L3 18l3 3 6.5-6.5a4 4 0 0 0 5.2-5.2l-2.8 2.8-2.1-2.1 2.9-2.7z" />
|
|
</>
|
|
),
|
|
user: (
|
|
<>
|
|
<circle cx="12" cy="8" r="4" />
|
|
<path d="M4 21a8 8 0 0 1 16 0" />
|
|
</>
|
|
),
|
|
video: (
|
|
<>
|
|
<rect x="3" y="6" width="14" height="12" rx="2" />
|
|
<path d="m17 10 4-2v8l-4-2" />
|
|
</>
|
|
),
|
|
wallet: (
|
|
<>
|
|
<path d="M4 7h16a1 1 0 0 1 1 1v12H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14" />
|
|
<path d="M16 13h2" />
|
|
</>
|
|
),
|
|
};
|
|
|
|
export default function DigitalThemeIcon({
|
|
name,
|
|
emoji,
|
|
className = "",
|
|
decorative = true,
|
|
}: DigitalThemeIconProps) {
|
|
if (CURRENT_DIGITAL_VISUAL_THEME === "theme1") {
|
|
return (
|
|
<span className={className} aria-hidden={decorative}>
|
|
{emoji}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg
|
|
className={className}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.9"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden={decorative}
|
|
>
|
|
{paths[name]}
|
|
</svg>
|
|
);
|
|
}
|