aviva.gay
👁️
1/**
2 * Renders a single MTG card symbol (mana, tap, energy, etc)
3 *
4 * Uses locally downloaded symbol SVGs from Scryfall.
5 */
6
7interface CardSymbolProps {
8 symbol: string;
9 size?: "small" | "medium" | "large" | "text";
10 className?: string;
11}
12
13const SIZE_CLASSES = {
14 small: "w-4 h-4",
15 medium: "w-5 h-5",
16 large: "w-6 h-6",
17 text: "h-[1.1em] w-[1.1em]",
18};
19
20const SYMBOL_SHADOW = "drop-shadow-[_-1px_1px_0_rgba(0,0,0,0.85)]";
21
22export function CardSymbol({
23 symbol,
24 size = "medium",
25 className,
26}: CardSymbolProps) {
27 // Normalize symbol for filename (e.g., "2/W" -> "2w", "T" -> "t")
28 const normalizedSymbol = symbol.toLowerCase().replace("/", "");
29
30 return (
31 <img
32 src={`/symbols/${normalizedSymbol}.svg`}
33 alt={symbol}
34 className={`${SIZE_CLASSES[size]} ${SYMBOL_SHADOW} ${className ?? ""}`}
35 title={symbol}
36 />
37 );
38}