内置图标 theme-only

Rspress 内置使用图标时，会使用一个 SvgWrapper 组件来渲染图标。支持 icon 为 url 或者 svgr 的 React 组件：

type Icon = React.FC<React.SVGProps<SVGSVGElement>> | string;

下面的代码是一个 Rspress 如何使用 IconGithub 的示例：

import { SvgWrapper, IconGithub } from '@rspress/core/theme';

<SvgWrapper icon={IconGithub} width={24} height={24} />

用法

当你想更换 Rspress 内置图标时，使用自定义主题 - 重导出进行替换。

theme/index.tsx

export { IconGithub } from './my-icons';
export * from '@rspress/core/theme-original';

所有 Rspress 使用到的图标如下：

源码

品牌图标

界面图标

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: '品牌图标',
          icons: [
            IconGithub,
            IconGitlab,
            IconAnthropic,
            IconOpenAI,
            IconNpm,
            IconYarn,
            IconPnpm,
            IconBun,
            IconDeno,
            IconJsdelivr,
            IconUnpkg,
          ],
        },
        {
          label: '界面图标',
          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>
  );
};

#内置图标 theme-only

#用法

内置图标 theme-only

用法