Icon (图标)
支持字体编辑工具添加删除定义自己喜欢的图标，
- 支持图片；图片支持预览
- 灵活扩展图标
- Tui开发有字体编辑工具，可自行扩展图标。 扩展和修改我的图标
- TuiPlus扩展图标预览
如何扩展图标
扩展图标配置目录
将TTF字体文件放在编译器tui-vitex目录下font目录中
注意
编译器会自动将多个TTF合并为一个TTF，解决IOS端多个字体文件导致的图标显示问题。合并后会自动注入到ICON组件中，无需手动配置。合并后的字体文件在编译器tui-vitex目录下merged.ttf可用字体编辑工具查看预览合并后的图标配置
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
基础用法参考 demo/icon/icon.uvue，通过 name 属性设置图标名称。
vue
<!-- 基础图标 -->
<t-icon name="home"></t-icon>
<!-- 带颜色的图标 -->
<t-icon name="success" type="success"></t-icon>
<t-icon name="error" type="error"></t-icon>
<!-- 不同尺寸 -->
<t-icon name="search" size="large"></t-icon>
<t-icon name="search" size="small"></t-icon>Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
path | 点击组件后跳转的页面路径；为空时仅响应事件 | string | '' |
hover | 是否启用点击效果 | boolean | false |
type | 组件主题类型，可选 info、primary、error、warning、success | string | '' |
disabled | 是否禁用 | boolean | false |
effect | 组件显示主题，可选 normal、dark、light、plain | string | '' |
size | 组件尺寸，可选 large、medium、small、mini | string | 'medium' |
name | 图标名称 | string | '' |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击时触发 | - |
transitionend | 动画结束时触发 | - |
initFinished | 组件初始化完成时触发，返回组件节点信息 | - |
touchstart | 触摸开始时触发 | - |
touchend | 触摸结束时触发 | - |
touchmove | 触摸移动时触发 | - |
touchcancel | 触摸取消时触发 | - |