Iconos

Para mostrar los iconos del conjunto de iconos integrados de Starlight, usa el componente <Icon>.

Importación

Importar componentes

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

Uso

Muestra un icono usando el componente <Icon>. Un icono requiere un name establecido en uno de los iconos integrados de Starlight y opcionalmente puede incluir un label para proporcionar contexto a los lectores de pantalla

Uso de Icon

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

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

Preview:

Personalizar iconos

Los atributos size y color se pueden usar para ajustar la apariencia del icono utilizando unidades CSS y valores de color. El atributo class se puede usar para agregar clases CSS personalizadas al icono.

Personalizar iconos

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

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

Preview:

Props de <Icon>

El componente <Icon> acepta las siguientes propiedades:

name

Requerido Tipo: string El nombre del icono a mostrar establecido en uno de los iconos integrados de Starlight.

label

Tipo: string Una etiqueta opcional para proporcionar contexto a las tecnologías de asistencia, como los lectores de pantalla.

Cuando no se establece label, el icono estará completamente oculto para las tecnologías de asistencia. En este caso, asegúrate de que el contexto siga siendo comprensible sin el icono. Por ejemplo, un enlace que contenga solo el icono debe incluir el atributo label para ser accesible, pero si un enlace contiene texto y el icono es puramente decorativo, omitir el label puede tener sentido.

size

Tipo: string El tamaño de un icono usando unidades CSS.

class

Tipo: string Personaliza las clases CSS para agregar al icono.