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 { 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.

label

тип: string

Необязательная метка, обеспечивающая контекст для вспомогательных технологий, таких как программы чтения с экрана.

Если label не задана, иконка будет полностью скрыта от вспомогательных технологий. В этом случае убедитесь, что контекст понятен и без иконки. Например, ссылка, содержащая только иконку, обязательно должна содержать атрибут label, чтобы быть доступной, но если ссылка содержит текст, а иконка является чисто декоративной, опустить label может быть вполне разумно.

size

тип: string

Размер иконки, заданный с помощью единиц CSS. Например, 2rem.

color

тип: string

Цвет иконки с использованием значения цвета CSS. Например, red.

class

тип: string

Пользовательские классы CSS для добавления к иконке.