diff --git a/docs/src/content/docs/ko/components/icons.mdx b/docs/src/content/docs/ko/components/icons.mdx index 44a2477bde9..5fde7ec4c9b 100644 --- a/docs/src/content/docs/ko/components/icons.mdx +++ b/docs/src/content/docs/ko/components/icons.mdx @@ -95,7 +95,7 @@ import { Icon } from '@astrojs/starlight/components'; ### `name` **필수** -**타입:** `string` +**타입:** [`StarlightIcon`](/ko/reference/icons/#starlighticon-타입) 표시할 아이콘의 이름을 [Starlight의 기본 제공 아이콘 중 하나](/ko/reference/icons/#모든-아이콘)로 설정합니다. diff --git a/docs/src/content/docs/ko/components/using-components.mdx b/docs/src/content/docs/ko/components/using-components.mdx index 6b7c14a7f60..b7c24243d7f 100644 --- a/docs/src/content/docs/ko/components/using-components.mdx +++ b/docs/src/content/docs/ko/components/using-components.mdx @@ -81,14 +81,14 @@ Starlight는 요소 사이에 여백을 추가하는 등 Markdown 콘텐츠에 컴포넌트 자체에서 내보내지 않더라도 컴포넌트에서 허용하는 `Props`를 참조하려면 `astro/types`의 [`ComponentProps`](https://docs.astro.build/ko/guides/typescript/#componentprops-타입) 타입을 사용합니다. 이는 기존 컴포넌트를 래핑하거나 확장할 때 유용할 수 있습니다. -다음 예시는 `ComponentProps`를 사용하여 Starlight의 내장 `Icon` 컴포넌트가 허용하는 속성의 타입을 가져옵니다: +다음 예시는 `ComponentProps`를 사용하여 Starlight의 내장 `Badge` 컴포넌트가 허용하는 속성의 타입을 가져옵니다: ```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/ko/reference/icons.mdx b/docs/src/content/docs/ko/reference/icons.mdx index f7932e72f82..0694f1b235d 100644 --- a/docs/src/content/docs/ko/reference/icons.mdx +++ b/docs/src/content/docs/ko/reference/icons.mdx @@ -10,6 +10,19 @@ Starlight는 `` 컴포넌트를 사용하여 콘텐츠에 표시할 수 아이콘은 [``](/ko/components/icons/) 컴포넌트를 사용하여 표시할 수 있습니다. 또한 [카드](/ko/components/cards/)와 같은 다른 컴포넌트나 [히어로 액션](/ko/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) { + // … +} +``` + ## 모든 아이콘 사용 가능한 모든 아이콘의 목록과 관련 이름이 아래에 나와 있습니다. 아이콘을 클릭하면 해당 이름을 클립보드에 복사할 수 있습니다.