+ {ICON_KEYS.map((key) => (
+
+ ))}
+
+ );
+}
diff --git a/src/components/appearance/swatch.tsx b/src/components/appearance/swatch.tsx
new file mode 100644
index 0000000..40bc4f4
--- /dev/null
+++ b/src/components/appearance/swatch.tsx
@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import type { IconKey, Swatch } from "@/shared/appearance";
+import { AppIcon } from "./app-icon";
+
+/** Renk anahtarını CSS değişkenine bağlar: --swatch-blue → --swatch (sınıflar bunu kullanır). */
+export const swatchStyle = (color: Swatch) =>
+ ({ "--swatch": `var(--swatch-${color})` }) as React.CSSProperties;
+
+/** Renkli yuvarlak ikon rozeti (kategori/hesap). */
+export function IconBadge({
+ icon,
+ color,
+ className,
+ size = "md",
+}: {
+ icon: IconKey;
+ color: Swatch;
+ className?: string;
+ size?: "sm" | "md";
+}) {
+ return (
+