diff --git a/docs/src/content/docs/zh-cn/components/icons.mdx b/docs/src/content/docs/zh-cn/components/icons.mdx index bd425fc4669..b0121d59bd4 100644 --- a/docs/src/content/docs/zh-cn/components/icons.mdx +++ b/docs/src/content/docs/zh-cn/components/icons.mdx @@ -95,7 +95,7 @@ import { Icon } from '@astrojs/starlight/components'; ### `name` **必要属性** -**类型:** `string` +**类型:** [`StarlightIcon`](/zh-cn/reference/icons/#starlighticon-类型) 要显示的图标名称设置为 [Starlight 的内置图标之一](/zh-cn/reference/icons/#所有图标)。 diff --git a/docs/src/content/docs/zh-cn/components/using-components.mdx b/docs/src/content/docs/zh-cn/components/using-components.mdx index 05108e9cab3..7aeacfc010b 100644 --- a/docs/src/content/docs/zh-cn/components/using-components.mdx +++ b/docs/src/content/docs/zh-cn/components/using-components.mdx @@ -81,14 +81,14 @@ Starlight 将默认样式应用于 Markdown 内容,例如,在元素之间添 使用 `astro/types` 中的 [`ComponentProps`](https://docs.astro.build/zh-cn/guides/typescript/#componentprops-类型) 类型来引用组件接受的 `Props`,即使它们不是由组件本身导出的。 这在包装或扩展现有组件时非常有用。 -以下示例为,使用 `ComponentProps` 获取 Starlight 内置 `Icon` 组件接受的 props 类型: +以下示例为,使用 `ComponentProps` 获取 Starlight 内置 `Badge` 组件接受的 props 类型: ```astro --- // src/components/Example.astro import type { ComponentProps } from 'astro/types'; -import { Icon } from '@astrojs/starlight/components'; +import { Badge } from '@astrojs/starlight/components'; -type IconProps = ComponentProps; +type BadgeProps = ComponentProps; --- ``` diff --git a/docs/src/content/docs/zh-cn/reference/icons.mdx b/docs/src/content/docs/zh-cn/reference/icons.mdx index fcf9541d4b6..11701a82566 100644 --- a/docs/src/content/docs/zh-cn/reference/icons.mdx +++ b/docs/src/content/docs/zh-cn/reference/icons.mdx @@ -10,6 +10,19 @@ Starlight 提供了一组内置图标,你可以使用 `` 组件在内容 可以使用 [``](/zh-cn/components/icons/) 组件来显示图标。 图标也常用于其他组件,例如 [卡片](/zh-cn/components/cards/) 或 [hero actions](/zh-cn/reference/frontmatter/#hero) 等设置。 +## `StarlightIcon` 类型 + +使用 `StarlightIcon` TypeScript 类型来引用 [Starlight 的内置图标的名称](#所有图标)。 + +```ts {2} /icon: (StarlightIcon)/ +// src/icon.ts +import type { StarlightIcon } from '@astrojs/starlight/types'; + +function getIconLabel(icon: StarlightIcon) { + // … +} +``` + ## 所有图标 下面显示了所有可用图标,包括它们对应名称的列表。单击图标将其名称复制到剪贴板。