Icon Ícone
Introdução
Um wrapper leve e ciente de tamanho e cor para formas SVG. Ele aplica dimensões de limite consistentes, herda currentcolor para que as formas correspondam automaticamente aos temas de texto adjacentes sem compilar pacotes de ícones externos inchados, e suporta tanto a ocultação decorativa quanto a rotulagem explícita para leitores de tela.
O componente Icon está totalmente integrado como um bloco icon no Page Builder, permitindo que os gerentes do Sveltia CMS injetem caminhos vetoriais personalizados, personalizem viewports e alterem configurações de escala diretamente nos layouts de página.
Uso
Essas configurações representam exatamente como os itens de bloco do construtor de páginas são construídos.
1. Indicador de Seta Mínimo (Tamanho Médio)
Fornece uma seta vetorial padronizada, útil para alinhar ao lado de cabeçalhos de cartão, listas de links ou botões de formulário.
{
"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 Categoria de Função Acenutuado (Escala Grande)
Renderiza um ícone gráfico maior representando uma função, um benefício de plano ou um bloco de categoria 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
| Propriedade | Tipo de Campo CMS | Padrão | Descrição / Opções Suportadas |
|---|---|---|---|
Marcação de Forma Vetorial (svg) | string | - | Tags de marcação SVG vetorial interna brutas (ex. <path d="..." />, <circle cx="..." />). |
Caixa Delimitadora do Viewport (viewBox) | string | "0 0 24 24" | Informa ao navegador a escala de coordenadas. Normalmente corresponde aos designs SVG de origem. |
Tamanho de Escala (size) | select | "md" | Escala de dimensões visuais padronizadas. • Opções: "2xs", "xs", "sm", "md", "lg", "xl". |
Regra de Preenchimento (fill) | string | "currentColor" | Regra de preenchimento subjacente. Defina como "none" se utilizar contornos de linha de traço. |
Cor de Traço (stroke) | string | - | Cor do contorno da borda. Defina como "currentColor" para herdar o tema de cor da fonte adjacente. |
Rótulo de Descrição Aria (aria-label) | string | - | Rótulo para leitores de tela. Se deixado em branco, o ícone é automaticamente ocultado dos leitores de tela (aria-hidden="true"). |
Notas de Acessibilidade e Otimização SVG
- Aria-Hidden por Padrão: Como os ícones são comumente usados como realces visuais decorativos (como ícones de marcador ao lado de uma lista de texto), o componente aplica automaticamente
aria-hidden="true"se nenhum textoaria-labeldescritivo for fornecido. - Mesclagem Inteligente de SVG (
asChild): Para layouts personalizados de desenvolvedor, definirasChild(padrão true) mescla automaticamente os nomes de classe calculados do componente e os parâmetros de escala diretamente em um único elemento<svg>filho escrito manualmente. Isso elimina a renderização de elementos wrapper redundantes no código-fonte HTML de saída. - Herança de Cor: Como a receita CSS subjacente define
color: currentcolor, os caminhos vetoriais que utilizamstroke="currentColor"oufill="currentColor"herdam perfeitamente os esquemas de cor tipográfica pais.