icons.mdx

title	description
アイコン	Starlightでアイコンを表示する方法を学びましょう。

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

Starlightの組み込みアイコンセットからアイコンを表示するには、<Icon>コンポーネントを使用します。

import Preview from '~/components/component-preview.astro';

インポート

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

使用方法

<Icon>コンポーネントを使用してアイコンを表示します。アイコンにはnameが必要で、これはStarlightの組み込みアイコンのいずれかに設定されます。また、オプションでスクリーンリーダー向けにlabelを追加して文脈を提供することができます。

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

<Icon name="star" />
<Icon name="starlight" label="Starlightのロゴ" />

{% icon name="star" /%}
{% icon name="starlight" label="Starlightのロゴ" /%}

アイコンのカスタマイズ

sizeやcolor属性を使用して、CSS単位やカラーバリューを使ってアイコンの外観を調整できます。また、class属性を使用してカスタムCSSクラスをアイコンに追加することができます。

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

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

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

<Icon> プロパティ

実装: Icon.astro

<Icon>コンポーネントは以下のプロパティを受け付けます。

name

必須
型: string

表示するアイコンの名前をStarlightの組み込みアイコンの1つに設定します。

label

型: string

スクリーンリーダーなどの支援技術に文脈を提供するためのオプションのラベル。

labelが設定されていない場合、アイコンは支援技術から完全に隠されます。この場合、アイコンがなくても文脈が理解できることを確認してください。例えば、アイコンのみが含まれるリンクには、アクセシビリティを確保するためにlabel属性が必ず含まれている必要がありますが、リンクにテキストが含まれ、アイコンが純粋に装飾的なものである場合は、labelを省略することが理にかなっています。

size

型: string

CSS単位でアイコンのサイズを指定します。

color

型: string

CSSカラーバリューを使用してアイコンの色を指定します。

class

型: string

アイコンにカスタムCSSクラスを追加します。