Icon Icono
Introducción
Un contenedor ligero y consciente de tamaño y color para formas SVG. Aplica dimensiones de límite consistentes, hereda currentcolor para que las formas coincidan automáticamente con los temas de texto adyacentes sin compilar paquetes de iconos externos inflados, y admite tanto el ocultamiento decorativo como el etiquetado explícito para lectores de pantalla.
El componente Icon está totalmente integrado como un bloque icon dentro del Page Builder, permitiendo a los gestores de Sveltia CMS inyectar rutas vectoriales personalizadas, personalizar viewports y alterar configuraciones de escala directamente dentro de los diseños de página.
Uso
Estas configuraciones representan exactamente cómo se construyen los elementos de bloque del page builder.
1. Indicador de Flecha Mínimo (Tamaño Mediano)
Proporciona una flecha vectorial estandarizada, útil para alinear junto a encabezados de tarjetas, listas de enlaces o botones de formulario.
{
"type": "icon",
"svg": "<path d=\"M5 12h14M12 5l7 7-7 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "md"
}
2. Marcador de Categoría de Función Acentuado (Escala Grande)
Renderiza un icono gráfico más grande que representa una función, una ventaja de plan o un bloque de categoría de marketing.
{
"type": "icon",
"svg": "<path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />",
"viewBox": "0 0 24 24",
"fill": "none",
"stroke": "currentColor",
"size": "lg"
}
Props
| Propiedad | Tipo de Campo CMS | Predeterminado | Descripción / Opciones Compatibles |
|---|---|---|---|
Marcado de Forma Vectorial (svg) | string | - | Etiquetas de marcado SVG vectorial interior en bruto (p. ej., <path d="..." />, <circle cx="..." />). |
Caja Delimitadora del Viewport (viewBox) | string | "0 0 24 24" | Indica al navegador la escala de coordenadas. Normalmente coincide con los diseños SVG de origen. |
Tamaño de Escala (size) | select | "md" | Escala de dimensiones visuales estandarizadas. • Opciones: "2xs", "xs", "sm", "md", "lg", "xl". |
Regla de Relleno (fill) | string | "currentColor" | Regla de relleno subyacente. Configúrelo en "none" si utiliza contornos de línea de trazo. |
Color de Trazo (stroke) | string | - | Color del contorno del borde. Configúrelo en "currentColor" para heredar el tema de color de fuente adyacente. |
Etiqueta de Descripción Aria (aria-label) | string | - | Etiqueta para lectores de pantalla. Si se deja en blanco, el icono se oculta automáticamente de los lectores de pantalla (aria-hidden="true"). |
Notas de Accesibilidad y Optimización SVG
- Aria-Hidden por Defecto: Como los iconos se usan comúnmente como resaltados visuales decorativos (como iconos de viñeta junto a una lista de texto), el componente aplica automáticamente
aria-hidden="true"si no se proporciona texto descriptivoaria-label. - Fusión Inteligente de SVG (
asChild): Para diseños personalizados de desarrollador, configurarasChild(por defecto true) fusiona automáticamente los nombres de clase calculados del componente y los parámetros de escala directamente en un único elemento<svg>secundario creado manualmente. Esto elimina el renderizado de elementos contenedores redundantes dentro del código fuente HTML de salida. - Herencia de Color: Dado que la receta CSS subyacente establece
color: currentcolor, las rutas vectoriales que utilizanstroke="currentColor"ofill="currentColor"heredan sin problemas los esquemas de color tipográfico principales.