图标 React 组件

图标 React 组件代表图标元素。它可以与自定义图标、Framework7 图标Material 图标 一起使用。

图标组件

包含以下组件

图标属性

属性类型默认值描述
大小数字
字符串
图标大小(以像素为单位)
图标字符串自定义图标类
f7字符串F7 图标字体图标的名称
材料字符串Material 图标字体图标的名称
ios字符串在使用 iOS 主题时要使用的图标。由图标族和图标名称用冒号隔开组成,例如 f7:house
md字符串在使用 Material 主题时要使用的图标。由图标族和图标名称用冒号隔开组成,例如 material:home
工具提示字符串图标 工具提示 文本,在将鼠标悬停在图标上或按下图标时显示
工具提示触发器字符串悬停定义如何触发(打开)工具提示。可以是 hoverclickmanual

示例

{/*  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>