图标 React 组件
图标 React 组件代表图标元素。它可以与自定义图标、Framework7 图标 和 Material 图标 一起使用。
图标组件
包含以下组件
图标
图标属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
大小 | 数字 字符串 | 图标大小(以像素为单位) | |
图标 | 字符串 | 自定义图标类 | |
f7 | 字符串 | F7 图标字体图标的名称 | |
材料 | 字符串 | Material 图标字体图标的名称 | |
ios | 字符串 | 在使用 iOS 主题时要使用的图标。由图标族和图标名称用冒号隔开组成,例如 f7:house | |
md | 字符串 | 在使用 Material 主题时要使用的图标。由图标族和图标名称用冒号隔开组成,例如 material:home | |
工具提示 | 字符串 | 图标 工具提示 文本,在将鼠标悬停在图标上或按下图标时显示 | |
工具提示触发器 | 字符串 | 悬停 | 定义如何触发(打开)工具提示。可以是 hover 、click 或 manual |
示例
{/* Default back icon */}
<Icon icon="icon-back"></Icon>
{/* Some custom icon */}
<Icon icon="icon-home"></Icon>
{/* F7 Icons font icon */}
<Icon f7="house"></Icon>
{/* Material Icons font icon */}
<Icon material="home"></Icon>
{/* F7 icons font icon with custom size and color */}
<Icon f7="house" size="44px" color="blue"></Icon>
{/* Conditional icon */}
<Icon ios="f7:house" md="material:home"></Icon>