Icon

展示 SVG 图标，并统一尺寸与颜色，适合按钮、导航和内容中的视觉标识。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于统一图标宿主与尺寸。优先复用 SnowUI 资源图标；有操作行为时放入 Button 并提供可访问名称，不把装饰图形误作功能图标。

优先提供资源图标；src 与解析后的 icon 均未命中时才渲染 children。
size 可继承父级尺寸；角标使用 Badge as="badge"。交互名称应提供给拥有操作的按钮。
Accordion 内的 Icon as="leading" 在未显式指定 size 时继承 Accordion 图标尺寸：sm/md/lg 分别为 16/20/24；未声明 leading 的 Icon 不参与这项继承，显式 size 优先。

import { Icon } from '@snowui-design-system/components';

属性	类型	默认值	示例	描述
`src`	`string`	`—`	`src="Example"`	图标图片 URL
`icon`	`Component<any>`	`—`	`icon={ExampleIcon}`	直接渲染 resource-svelte 图标组件。
`stateIcon`	`StateValueMap<Component<any> \| null>`	`—`	`stateIcon={ExampleIcon}`	根据最近父级 Frame 的 `currentState` 解析图标。未命中当前状态时回退 `Idle`，再回退 `icon` / `src` / children；状态值为 `null` 时隐藏 Icon。
`size`	`IconSize`	`—`	`size={value}`	图标尺寸。未显式设置时，自动继承父级 `Frame` 提供尺寸上下文。
`background`	`boolean`	`false`	`background`	是否显示背景
`weight`	`string`	`—`	`weight="Example"`	透传给图标资源的视觉权重；资源支持时可用 thin、light、regular、bold、fill、duotone。未设置时由资源或上下文决定，不会凭空生成资源缺少的变体。
`as`	`\| "badge" \| "icon" \| "prev" \| "next" \| "close" \| (string & {})`	`"icon"`	`as={asOptions}`	角色：作为独立图标、徽标、图片中央图标或 Viewer 控制图标
`children`	`Snippet`	`—`	`<Icon>Content</Icon>`	图标内容与角标组合；仅当 src 和解析后的 icon 均未命中时渲染；可同时放入资源图标与 Badge as="badge"，角标由宿主定位。
`badgePosition`	`"top" \| "bottom"`	`"top"`	`badgePosition="top"`	作为角标宿主时的位置：top 为右上，bottom 为右下。