コンテンツにスキップ
Starlight
Filters

    アイコン

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

    プレビュー

    インポート

    Section titled “インポート”
    import { Icon } from '@astrojs/starlight/components';

    使用方法

    Section titled “使用方法”

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

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

    <Icon name="star" />
    <Icon name="starlight" label="Starlightのロゴ" />
    プレビュー

    アイコンのカスタマイズ

    Section titled “アイコンのカスタマイズ”

    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> プロパティ

    Section titled “<Icon> プロパティ”

    実装: Icon.astro

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

    name

    Section titled “name”

    必須
    型: string

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

    label

    Section titled “label”

    型: string

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

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

    size

    Section titled “size”

    型: string

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

    color

    Section titled “color”

    型: string

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

    class

    Section titled “class”

    型: string

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