ui(theme): use reicon icons

src/components/theme-toggle.test.tsx

@@ -0,0 +1,14 @@
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import { describe, test } from 'node:test';
+
+describe('ThemeToggle', () => {
+  test('uses filled reicon sun and moon icons', () => {
+    const source = fs.readFileSync('src/components/theme-toggle.tsx', 'utf8');
+
+    assert.match(source, /import \{ Moon3, Sun \} from 'reicon-react';/);
+    assert.doesNotMatch(source, /from 'lucide-react'/);
+    assert.match(source, /const Icon = isDark \? Sun : Moon3;/);
+    assert.match(source, /<Icon className="size-4" weight="Filled" aria-hidden="true" \/>/);
+  });
+});

src/components/theme-toggle.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { Moon, Sun } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTheme } from 'fumadocs-ui/provider/base';
+import { Moon3, Sun } from 'reicon-react';
 
 export function ThemeToggle() {
   const { resolvedTheme, setTheme } = useTheme();
@@ -14,7 +14,7 @@ export function ThemeToggle() {
 
   const isDark = mounted && resolvedTheme === 'dark';
   const nextTheme = isDark ? 'light' : 'dark';
-  const Icon = isDark ? Sun : Moon;
+  const Icon = isDark ? Sun : Moon3;
 
   return (
     <button
@@ -24,7 +24,7 @@ export function ThemeToggle() {
       className="inline-flex size-9 items-center justify-center rounded-lg border bg-fd-secondary/50 text-fd-secondary-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground"
       onClick={() => setTheme(nextTheme)}
     >
-      <Icon className="size-4" fill="currentColor" aria-hidden="true" />
+      <Icon className="size-4" weight="Filled" aria-hidden="true" />
     </button>
   );
 }