diff --git a/apps/docs/package.json b/apps/docs/package.json
index 6bed60e5..3211bb7b 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -37,7 +37,6 @@
"fumadocs-mdx": "catalog:",
"fumadocs-typescript": "catalog:",
"fumadocs-ui": "catalog:",
- "lucide-react": "catalog:",
"lz-string": "catalog:",
"monaco-editor": "catalog:",
"next-themes": "catalog:",
diff --git a/apps/docs/src/components/example-block.tsx b/apps/docs/src/components/example-block.tsx
index 623be3ca..cd4119f6 100644
--- a/apps/docs/src/components/example-block.tsx
+++ b/apps/docs/src/components/example-block.tsx
@@ -1,8 +1,8 @@
import { Box } from '@luke-ui/react/box';
+import { Icon } from '@luke-ui/react/icon';
import { Link } from '@tanstack/react-router';
import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { CodeIcon, SquareArrowOutUpRightIcon } from 'lucide-react';
import type { ComponentType, JSX } from 'react';
import { Suspense, use, useId, useState } from 'react';
import { encodeCodeHash } from '../lib/playground-hash';
@@ -59,7 +59,7 @@ function ExampleContent({ mode, src, title }: ExampleBlockProps): JSX.Element {
target="_blank"
to="/playground"
>
-
+
Open in playground
diff --git a/apps/docs/src/components/page-actions.tsx b/apps/docs/src/components/page-actions.tsx
index 01a508a8..66c23925 100644
--- a/apps/docs/src/components/page-actions.tsx
+++ b/apps/docs/src/components/page-actions.tsx
@@ -1,5 +1,5 @@
+import { Icon } from '@luke-ui/react/icon';
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { BookOpenIcon, CheckIcon, CopyIcon, ExternalLinkIcon, PencilIcon } from 'lucide-react';
import { useState } from 'react';
interface PageActionsProps {
@@ -19,7 +19,7 @@ export function PageActions({ markdownUrl, githubUrl, storybookUrl }: PageAction
rel="noreferrer"
target="_blank"
>
-
+
View in Storybook
) : null}
@@ -29,7 +29,7 @@ export function PageActions({ markdownUrl, githubUrl, storybookUrl }: PageAction
rel="noreferrer"
target="_blank"
>
-
+
View as Markdown
-
+
Edit on GitHub
@@ -66,7 +66,7 @@ function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
onClick={onCopy}
type="button"
>
- {copied ? : }
+
{copied ? 'Copied' : 'Copy Markdown'}
);
diff --git a/apps/docs/src/components/playground/color-mode-toggle.tsx b/apps/docs/src/components/playground/color-mode-toggle.tsx
index efc4c059..ee200b46 100644
--- a/apps/docs/src/components/playground/color-mode-toggle.tsx
+++ b/apps/docs/src/components/playground/color-mode-toggle.tsx
@@ -1,12 +1,11 @@
-import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';
import { useTheme } from 'next-themes';
import { useSyncExternalStore } from 'react';
import { IconToggleButtonGroup } from './icon-toggle-button-group.js';
const COLOR_MODES = [
- { Icon: SunIcon, label: 'Light theme', value: 'light' },
- { Icon: MoonIcon, label: 'Dark theme', value: 'dark' },
- { Icon: MonitorIcon, label: 'System theme', value: 'system' },
+ { icon: 'sun', label: 'Light theme', value: 'light' },
+ { icon: 'moon', label: 'Dark theme', value: 'dark' },
+ { icon: 'monitor', label: 'System theme', value: 'system' },
] as const;
type ColorMode = (typeof COLOR_MODES)[number]['value'];
diff --git a/apps/docs/src/components/playground/icon-toggle-button-group.tsx b/apps/docs/src/components/playground/icon-toggle-button-group.tsx
index c974d461..c4f1137d 100644
--- a/apps/docs/src/components/playground/icon-toggle-button-group.tsx
+++ b/apps/docs/src/components/playground/icon-toggle-button-group.tsx
@@ -1,16 +1,12 @@
+import { Icon } from '@luke-ui/react/icon';
+import type { IconName } from '@luke-ui/react/icon';
import { cx } from '@luke-ui/react/utils';
-import type { ComponentType } from 'react';
import type { Selection } from 'react-aria-components/GridList';
import { ToggleButton } from 'react-aria-components/ToggleButton';
import { ToggleButtonGroup } from 'react-aria-components/ToggleButtonGroup';
-type IconComponent = ComponentType<{
- 'aria-hidden'?: boolean;
- className?: string;
-}>;
-
type IconToggleItem = {
- Icon: IconComponent;
+ icon: IconName;
label: string;
value: Value;
};
@@ -48,7 +44,7 @@ export function IconToggleButtonGroup({
selectedKeys={value === null ? [] : [value]}
selectionMode="single"
>
- {options.map(({ Icon, label: optionLabel, value: optionValue }) => (
+ {options.map(({ icon, label: optionLabel, value: optionValue }) => (
{
@@ -60,7 +56,7 @@ export function IconToggleButtonGroup({
id={optionValue}
key={optionValue}
>
-
+
))}
diff --git a/apps/docs/src/components/playground/viewport-toggle.tsx b/apps/docs/src/components/playground/viewport-toggle.tsx
index 9a9c43a5..298bf692 100644
--- a/apps/docs/src/components/playground/viewport-toggle.tsx
+++ b/apps/docs/src/components/playground/viewport-toggle.tsx
@@ -1,9 +1,8 @@
-import { MonitorIcon, SmartphoneIcon } from 'lucide-react';
import { IconToggleButtonGroup } from './icon-toggle-button-group';
const VIEWPORTS = [
- { Icon: MonitorIcon, label: 'Desktop', value: '100%' },
- { Icon: SmartphoneIcon, label: 'Mobile', value: '375px' },
+ { icon: 'monitor', label: 'Desktop', value: '100%' },
+ { icon: 'mobilePhone', label: 'Mobile', value: '375px' },
] as const;
export type ViewportWidth = (typeof VIEWPORTS)[number]['value'];
diff --git a/apps/docs/src/examples/icon-button/tone-and-appearance.tsx b/apps/docs/src/examples/icon-button/tone-and-appearance.tsx
index a184cdf2..04aa60f5 100644
--- a/apps/docs/src/examples/icon-button/tone-and-appearance.tsx
+++ b/apps/docs/src/examples/icon-button/tone-and-appearance.tsx
@@ -4,9 +4,24 @@ import { IconButton } from '@luke-ui/react/icon-button';
export default function ToneAndAppearance() {
return (
-
-
-
+
+
+
);
}
diff --git a/apps/docs/src/examples/icon/basic.tsx b/apps/docs/src/examples/icon/basic.tsx
index 7941b56b..673213a0 100644
--- a/apps/docs/src/examples/icon/basic.tsx
+++ b/apps/docs/src/examples/icon/basic.tsx
@@ -5,7 +5,7 @@ import { Text } from '@luke-ui/react/text';
export default function Basic() {
return (
-
+
Continue
diff --git a/apps/docs/src/routes/__root.tsx b/apps/docs/src/routes/__root.tsx
index fb4e6d56..6c2cdd7b 100644
--- a/apps/docs/src/routes/__root.tsx
+++ b/apps/docs/src/routes/__root.tsx
@@ -1,5 +1,7 @@
import '@luke-ui/react/themes/paper.css';
import '@luke-ui/react/themes/tactile.css';
+import { IconSpritesheetProvider } from '@luke-ui/react/icon';
+import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline';
import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
import type { SharedProps } from 'fumadocs-ui/components/dialog/search';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
@@ -56,7 +58,9 @@ function RootDocument({ children }: { children: ReactNode }) {
search={{ SearchDialog: LazySearchDialog }}
theme={{ attribute: ['class', 'data-color-mode'] }}
>
- {children}
+
+ {children}
+
diff --git a/apps/docs/src/routes/playground/index.tsx b/apps/docs/src/routes/playground/index.tsx
index e8fdeb52..73e72c58 100644
--- a/apps/docs/src/routes/playground/index.tsx
+++ b/apps/docs/src/routes/playground/index.tsx
@@ -1,7 +1,7 @@
+import { Icon } from '@luke-ui/react/icon';
import { cx } from '@luke-ui/react/utils';
import { ClientOnly, createFileRoute, Link } from '@tanstack/react-router';
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
-import { Maximize2Icon, Minimize2Icon } from 'lucide-react';
import { lazy, Suspense, useCallback, useEffect, useReducer, useRef, useState } from 'react';
import { Group, Panel, Separator } from 'react-resizable-panels';
import { useSpinDoctor } from 'spin-doctor';
@@ -160,7 +160,7 @@ function Playground() {
title="Fullscreen preview"
type="button"
>
-