Icon
Introduction
A lightweight, size- and color-aware wrapper for SVG shapes. It enforces consistent bounding dimensions, inherits currentcolor so shapes automatically match adjacent text themes without compiling bloated, external icon packages, and supports both decorative hiding and explicit labeling for screen readers.
The Icon component is fully integrated as an icon block inside the Page Builder, enabling Sveltia CMS managers to inject custom vector paths, customize viewports, and alter scale settings directly inside page layouts.
Usage
These configurations represent exactly how page-builder block items are constructed.
1. Minimal Arrow Indicator (Medium Size)
Provides a standardized vector arrow, useful for aligning beside card headings, link lists, or form buttons.
{
"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. Accented Feature Category Marker (Large Scale)
Renders a larger graphic icon representing a feature, plan perk, or marketing category block.
{
"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
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Vector Shape Markup (svg) | string | - | Raw vector inner SVG markup tags (e.g., <path d="..." />, <circle cx="..." />). |
Viewport Bounding Box (viewBox) | string | "0 0 24 24" | Tells the browser coordinate scaling. Usually matches source SVG designs. |
Scale Size (size) | select | "md" | Standardized visual dimensions scale. • Options: "2xs", "xs", "sm", "md", "lg", "xl". |
Fill Rule (fill) | string | "currentColor" | Backing fill rule. Set to "none" if utilizing stroke-line outlines. |
Stroke Color (stroke) | string | - | Border outline color. Set to "currentColor" to inherit the adjacent font color theme. |
Aria Description Label (aria-label) | string | - | Screen-reader label. When left blank, the icon is hidden from screen readers automatically (aria-hidden="true"). |
Accessibility & SVG Optimization Notes
- Aria-Hidden by Default: Because icons are commonly used as decorative visual highlights (such as bullet icons beside a text list), the component automatically applies
aria-hidden="true"if no descriptivearia-labeltext is supplied. - Smart SVG Merging (
asChild): For custom developer layouts, settingasChild(defaults to true) automatically merges the component's calculated class names and scaling parameters directly onto a single, hand-authored child<svg>element. This eliminates rendering redundant wrapper elements inside the output HTML source. - Color Inheritance: Since the backing CSS recipe sets
color: currentcolor, vector paths utilizingstroke="currentColor"orfill="currentColor"inherit parent typography color schemes seamlessly.