diff --git a/README.md b/README.md index bba641c..28c55a8 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,14 @@ npx skills add rstackjs/agent-skills --skill rspress-v2-upgrade Migrate Rspress projects from v1 to v2. Use when a user asks to upgrade Rspress, follow the v1-to-v2 guide, update packages/configs/themes, or validate the upgrade. +### rspress-custom-theme + +```bash +npx skills add rstackjs/agent-skills --skill rspress-custom-theme +``` + +Customize Rspress themes using CSS variables, Layout slots, component wrapping, or component ejection. Use when a user wants to change the look and feel of an Rspress site, override theme components, add custom navigation/sidebar/footer content, inject global providers, or modify the default Rspress theme in any way. + ### rspress-description-generator ```bash diff --git a/scripts/dictionary.txt b/scripts/dictionary.txt index bd3d004..5a15439 100644 --- a/scripts/dictionary.txt +++ b/scripts/dictionary.txt @@ -35,6 +35,7 @@ rstack rstackjs rstest shiki +SVGSVG svgr samply tailwindcss diff --git a/skills/rspress-custom-theme/SKILL.md b/skills/rspress-custom-theme/SKILL.md index 4f550b2..2ee763c 100644 --- a/skills/rspress-custom-theme/SKILL.md +++ b/skills/rspress-custom-theme/SKILL.md @@ -24,6 +24,7 @@ Guide for customizing Rspress (v2) themes. Rspress offers four levels of customi | Add content around existing components (banners, footers, logos) | 3 | Layout slots (wrap) | | Override MDX rendering (custom `
`, etc.) | 3 | `components` slot |
| Wrap the app in a provider (state, analytics, auth) | 4 | Eject `Root` |
+| Replace built-in icons (logo, GitHub, search, etc.) | — | Icon re-export |
| Completely replace a built-in component | 4 | Eject that component |
| Add a global floating component (back-to-top, chat widget) | — | `globalUIComponents` config |
| Control page layout structure (hide sidebar, blank page) | — | Frontmatter `pageType` |
@@ -139,6 +140,55 @@ export { DocFooter } from './components/DocFooter';
---
+## Custom Icons
+
+Rspress has 27 built-in icons used across the UI. You can replace any of them by re-exporting your own icon component with the same name — no ejection needed. This uses the same `theme/index.tsx` mechanism: your named export takes precedence over the wildcard re-export.
+
+**Icon type**: Each icon is a React component or a URL string:
+
+```ts
+import type { FC, SVGProps } from 'react';
+type Icon = FC> | string;
+```
+
+**Example 1** — Replace an icon with a custom SVG component:
+
+```tsx
+// theme/index.tsx
+export * from '@rspress/core/theme-original';
+
+// Named export overrides the wildcard — replaces the GitHub icon site-wide
+export const IconGithub = (props: React.SVGProps) => (
+
+);
+```
+
+**Example 2** — Use an SVGR import:
+
+```tsx
+// theme/index.tsx
+export * from '@rspress/core/theme-original';
+
+import CustomGithubIcon from './icons/github.svg?react';
+export const IconGithub = CustomGithubIcon;
+```
+
+**Using `SvgWrapper` in MDX or custom components**:
+
+```mdx
+import { SvgWrapper, IconGithub } from '@rspress/core/theme';
+
+
+```
+
+**Available icons**: `IconArrowDown`, `IconArrowRight`, `IconClose`, `IconCopy`, `IconDeprecated`, `IconDown`, `IconEdit`, `IconEmpty`, `IconExperimental`, `IconExternalLink`, `IconFile`, `IconGithub`, `IconGitlab`, `IconHeader`, `IconJump`, `IconLink`, `IconLoading`, `IconMenu`, `IconMoon`, `IconScrollToTop`, `IconSearch`, `IconSmallMenu`, `IconSuccess`, `IconSun`, `IconTitle`, `IconWrap`, `IconWrapped`.
+
+> **Source**: See the [icons source](https://github.com/web-infra-dev/rspress/blob/main/packages/core/src/theme/icons.ts) for default implementations.
+
+---
+
## Global UI Components
For components that should render on every page without theme overrides:
@@ -187,5 +237,6 @@ Fine-grained: set `navbar: false`, `sidebar: false`, `outline: false`, `footer:
- Custom theme guide:
- CSS variables:
- Layout component:
+- Built-in icons:
- Built-in hooks:
- CLI commands (eject):