アイコン
Starlightの組み込みアイコンセットからアイコンを表示するには、<Icon>
コンポーネントを使用します。
インポート
使用方法
<Icon>
コンポーネントを使用してアイコンを表示します。アイコンにはname
が必要で、これはStarlightの組み込みアイコンのいずれかに設定されます。また、オプションでスクリーンリーダー向けにlabel
を追加して文脈を提供することができます。
アイコンのカスタマイズ
size
やcolor
属性を使用して、CSS単位やカラーバリューを使ってアイコンの外観を調整できます。また、class
属性を使用してカスタムCSSクラスをアイコンに追加することができます。
import { Icon } 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クラスを追加します。