Icon 图标
Data Display
展示型
简介
一个轻量级的、可识别尺寸与颜色的 SVG 图形包装器。它强制统一的外包围尺寸，并继承 currentcolor，使图形无需编译臃肿的外部图标包即可自动匹配相邻文本主题，同时支持装饰性隐藏和面向屏幕阅读器的显式标注。
Icon 组件已作为 icon 区块完全集成到 Page Builder 中，使 Sveltia CMS 管理者能够直接在页面布局中注入自定义矢量路径、自定义视口并更改缩放设置。
用法
以下配置精确展示了页面构建器区块条目是如何构建的。
1. 极简箭头指示器（中号）
提供一个标准化的矢量箭头，适用于在卡片标题、链接列表或表单按钮旁对齐。
{
"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. 强调型功能分类标记（大号）
渲染一个更大的图形图标，代表功能、套餐权益或营销分类区块。
{
"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"
}
属性
| 属性 | CMS 字段类型 | 默认值 | 描述 / 支持选项 |
|---|---|---|---|
矢量形状标记 (svg) | string | - | 原始矢量内部 SVG 标记标签（例如 <path d="..." />、<circle cx="..." />）。 |
视口包围盒 (viewBox) | string | "0 0 24 24" | 告知浏览器坐标缩放。通常与源 SVG 设计匹配。 |
缩放尺寸 (size) | select | "md" | 标准化的视觉尺寸比例。 • 选项： "2xs"、"xs"、"sm"、"md"、"lg"、"xl"。 |
填充规则 (fill) | string | "currentColor" | 背景填充规则。如果使用描边轮廓线，请设置为 "none"。 |
描边颜色 (stroke) | string | - | 边框轮廓颜色。设置为 "currentColor" 以继承相邻的字体颜色主题。 |
ARIA 描述标签 (aria-label) | string | - | 屏幕阅读器标签。留空时，图标会自动对屏幕阅读器隐藏（aria-hidden="true"）。 |
无障碍与 SVG 优化说明
- 默认 Aria-Hidden： 由于图标通常用作装饰性视觉强调（例如文本列表旁的子弹图标），如果没有提供描述性的
aria-label文本，组件会自动应用aria-hidden="true"。 - 智能 SVG 合并（
asChild）： 对于自定义开发者布局，设置asChild（默认 true）会自动将组件计算出的类名和缩放参数直接合并到单个手写子<svg>元素上。这消除了在输出 HTML 源码中渲染冗余包装元素的情况。 - 颜色继承： 由于底层 CSS 配方设置了
color: currentcolor，使用stroke="currentColor"或fill="currentColor"的矢量路径会无缝继承父级的排版配色方案。