icons.mdx

title	description
Iconos	Aprende a mostrar iconos en Starlight.

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

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

import Preview from '~/components/component-preview.astro';

Importación

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.

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

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

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

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.

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)" /%}

Props de <Icon>

Implementación: Icon.astro

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.

color

tipo: string

El color de un icono utilizando un valor de color CSS.

class

tipo: string

Personaliza las clases CSS para agregar al icono.