When Rspress uses icons, it uses a SvgWrapper component to render icons. It supports icon as a URL or an svgr React component:
type Icon = React.FC<React.SVGProps<SVGSVGElement>> | string;The following code is an example of how Rspress uses IconGithub:
import { SvgWrapper, IconGithub } from '@rspress/core/theme';
<SvgWrapper icon={IconGithub} width={24} height={24} />When you want to replace Rspress built-in icons, use Custom Theme - Re-export for replacement.
export { IconGithub } from './my-icons';
export * from '@rspress/core/theme-original';All icons used by Rspress are as follows:
import {
SvgWrapper,
IconGithub,
IconGitlab,
IconAnthropic,
IconOpenAI,
IconNpm,
IconYarn,
IconPnpm,
IconBun,
IconDeno,
IconJsdelivr,
IconUnpkg,
IconArrowDown,
IconArrowRight,
IconClose,
IconCopy,
IconDeprecated,
IconDown,
IconEdit,
IconEmpty,
IconExperimental,
IconExternalLink,
IconFile,
IconHeader,
IconJump,
IconLink,
IconLoading,
IconMenu,
IconMoon,
IconOpenInChat,
IconScrollToTop,
IconSearch,
IconSmallMenu,
IconSuccess,
IconSun,
IconTitle,
IconWrap,
IconWrapped,
} from '@rspress/core/theme';
export default () => {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
{[
{
label: 'Brand icons',
icons: [
IconGithub,
IconGitlab,
IconAnthropic,
IconOpenAI,
IconNpm,
IconYarn,
IconPnpm,
IconBun,
IconDeno,
IconJsdelivr,
IconUnpkg,
],
},
{
label: 'Interface icons',
icons: [
IconArrowDown,
IconArrowRight,
IconClose,
IconCopy,
IconDeprecated,
IconDown,
IconEdit,
IconEmpty,
IconExperimental,
IconExternalLink,
IconFile,
IconHeader,
IconJump,
IconLink,
IconLoading,
IconMenu,
IconMoon,
IconOpenInChat,
IconScrollToTop,
IconSearch,
IconSmallMenu,
IconSuccess,
IconSun,
IconTitle,
IconWrap,
IconWrapped,
],
},
].map(({ label, icons }) => (
<div key={label}>
<div style={{ fontSize: 12, fontWeight: 500, marginBottom: 8 }}>
{label}
</div>
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
{icons.map((Icon, idx) => (
<SvgWrapper icon={Icon} key={idx} width={24} height={24} />
))}
</div>
</div>
))}
</div>
);
};