图标

要显示 Starlight 的内置图标集中的图标，请使用 <Icon> 组件。

预览

导入

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

用法

使用 <Icon> 组件来显示图标。一个图标需要一个 name 属性，并将其设置为 Starlight 的内置图标之一，还可以选择性地包含一个 label 属性，为屏幕阅读器提供上下文信息。

MDX

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

<Icon name="star" />
<Icon name="starlight" label="The Starlight logo" />

Markdoc

{% icon name="star" /%}
{% icon name="starlight" label="The Starlight logo" /%}

预览

自定义图标

可以使用 size 和 color 属性，通过 CSS 单位和颜色值来调整图标的外观。可以使用 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 类。