아이콘

Starlight의 기본 제공 아이콘 세트의 아이콘을 표시하려면 <Icon> 컴포넌트를 사용하세요.

미리보기

가져오기

import { Icon } from '@astrojs/starlight/components';

사용

<Icon> 컴포넌트를 사용하여 아이콘을 표시합니다. 아이콘에는 Starlight의 기본 제공 아이콘 중 하나로 설정된 name이 필요하며, 화면 리더에 컨텍스트를 제공하기 위해 선택적으로 label을 포함할 수 있습니다.

MDX

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" />
<Icon name="starlight" label="Starlight 로고" />

Markdoc

{% icon name="star" /%}
{% icon name="starlight" label="Starlight 로고" /%}

미리보기

아이콘 사용자 정의

CSS 단위와 색상 값을 사용하여 아이콘의 모양을 조정하는 데 size 및 color 속성을 사용할 수 있습니다. class 속성을 사용하여 아이콘에 사용자 정의 CSS 클래스를 추가할 수 있습니다.

MDX

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />

Markdoc

{% icon name="star" color="goldenrod" size="2rem" /%}
{% icon name="rocket" color="var(--sl-color-text-accent)" /%}

미리보기

<Icon> 속성

구현: Icon.astro

<Icon> 컴포넌트는 다음 속성을 허용합니다:

name

필수
타입: StarlightIcon

표시할 아이콘의 이름을 Starlight의 기본 제공 아이콘 중 하나로 설정합니다.

label

타입: string

화면 리더와 같은 보조 기술에 컨텍스트를 제공하기 위한 선택적 레이블입니다.

label을 설정하지 않으면 보조 기술에서 아이콘이 완전히 숨겨집니다. 이 경우 아이콘 없이도 문맥을 이해할 수 있는지 확인하세요. 예를 들어 아이콘만 포함된 링크는 label 속성을 포함해야 액세스할 수 있지만, 링크에 텍스트가 포함되어 있고 아이콘이 순전히 장식용인 경우에는 label을 생략해도 괜찮습니다.

size

타입: string

CSS 단위를 사용한 아이콘 크기입니다.

color

타입: string

CSS 색상 값을 사용하는 아이콘의 색상입니다.

class

타입: string

아이콘에 추가할 사용자 정의 CSS 클래스입니다.