圖示 React 元件
Icon React 組件代表 Icon 元素。它已準備好與自訂圖示、Framework7 圖示 和 Material 圖示 一起使用。
Icon 組件
包含以下組件
圖示
Icon 屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| size | 數字 字串 | 圖示大小（單位：像素） | |
| icon | 字串 | 自訂圖示類別 | |
| f7 | 字串 | F7 圖示字型圖示名稱 | |
| material | 字串 | Material 圖示字型圖示名稱 | |
| ios | 字串 | 如果使用 iOS 主題時要使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 f7:house | |
| md | 字串 | 如果使用 Material 主題時要使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 material:home | |
| tooltip | 字串 | 將滑鼠游標移到圖示上或按一下圖示時要顯示的 Icon 工具提示 文字 | |
| tooltipTrigger | 字串 | hover | 定義如何觸發（開啟）工具提示。可以是 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>