Icon Vue 组件
Icon Vue 组件表示 Icon 元素。它已准备好在自定义图标、Framework7 图标 和 Material 图标 中使用。
Icon 组件
包括以下组件
f7-icon
Icon 属性
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
| size | 数字 字符串 | 像素单位的图标大小 | |
| icon | 字符串 | 自定义图标样式 | |
| f7 | 字符串 | F7 图标字体图标的名称 | |
| material | 字符串 | Material 图标字体图标的名称 | |
| ios | 字符串 | 如果使用 iOS 主题，则会使用的图标。它由图标族和图标名称组成，中间用冒号分隔，例如 f7:house | |
| md | 字符串 | 如果使用材质主题，可使用的图标。由图标族和图标名组成，中间以冒号分隔，例如 material:home | |
| 工具提示 | 字符串 | 将鼠标悬停/点击图标时显示的图标 工具提示 文本 | |
| 工具提示触发器 | 字符串 | 悬停 | 定义如何（打开）触发工具提示。可以是 悬停、点击 或 手动 |
示例
<!-- Default back icon -->
<f7-icon icon="icon-back"></f7-icon>
<!-- Some custom icon -->
<f7-icon icon="icon-home"></f7-icon>
<!-- F7 Icons font icon -->
<f7-icon f7="house"></f7-icon>
<!-- Material Icons font icon -->
<f7-icon material="home"></f7-icon>
<!-- F7 icons font icon with custom size and color -->
<f7-icon f7="house" size="44px" color="blue"></f7-icon>
<!-- Conditional icon -->
<f7-icon ios="f7:house" md="material:home"></f7-icon>