Iconos
Para mostrar los iconos del conjunto de iconos integrados de Starlight, usa el componente <Icon>
.
Importación
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.
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.