> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# 内置图标

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

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

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

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

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

## 用法

当你想更换 Rspress 内置图标时，使用 [自定义主题 - 重导出](https://rspress.rs/zh/guide/basic/custom-theme.md#reexport) 进行替换。

```tsx title="theme/index.tsx"
export { IconGithub } from './my-icons';
export * from '@rspress/core/theme-original';
```

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


[源码](https://github.com/web-infra-dev/rspress/blob/main/packages/core/src/theme/icons.ts)

```tsx preview
import {
  SvgWrapper,
  IconAnthropic,
  IconArrowDown,
  IconArrowRight,
  IconClose,
  IconCopy,
  IconDeprecated,
  IconDown,
  IconEdit,
  IconEmpty,
  IconExperimental,
  IconExternalLink,
  IconFile,
  IconGithub,
  IconGitlab,
  IconHeader,
  IconJump,
  IconLoading,
  IconMenu,
  IconMoon,
  IconOpenAI,
  IconOpenInChat,
  IconScrollToTop,
  IconSearch,
  IconSmallMenu,
  IconSuccess,
  IconSun,
  IconTitle,
  IconWrap,
  IconWrapped,
  IconLink,
} from '@rspress/core/theme';

export default () => {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 12 }}>
      {[
        IconAnthropic,
        IconArrowDown,
        IconArrowRight,
        IconClose,
        IconCopy,
        IconDeprecated,
        IconDown,
        IconEdit,
        IconEmpty,
        IconExperimental,
        IconExternalLink,
        IconFile,
        IconGithub,
        IconGitlab,
        IconHeader,
        IconJump,
        IconLoading,
        IconMenu,
        IconMoon,
        IconOpenAI,
        IconOpenInChat,
        IconScrollToTop,
        IconSearch,
        IconSmallMenu,
        IconSuccess,
        IconSun,
        IconTitle,
        IconWrap,
        IconWrapped,
        IconLink,
      ].map((Icon, idx) => (
        <SvgWrapper icon={Icon} key={idx} width={24} height={24} />
      ))}
    </div>
  );
};
```