图标
Icon / Lucide
用统一笔触的矢量符号表达操作、对象与状态。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'icon'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
界面需要识别性强、随尺寸和主题保持一致的操作或状态符号。
什么时候不用
不熟悉的图标不能独自承担关键操作含义；应同时给出文字标签。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
name | "sparkles" |
size | 24 |
strokeWidth | 1.75 |
label | "" |
decorative | true |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 装饰图标对读屏隐藏；有信息的图标必须有可理解的标签。
- 图标大小与点击区域是不同概念，交互目标由外层按钮或链接保证。
和相似组件的区别
Icon 是单个受控 SVG 图形；Button 与 Link 提供操作和导航语义。图标本身不会伪装成可点击控件。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
原生 JavaScript、React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid · 来源核验