圖示 Svelte 元件
Icon Svelte 元件表示 Icon 元素。它已準備好與自訂圖示、Framework7 圖示 和 Material 圖示 一同使用。
Icon 元件
包含下列元件
圖示
Icon 屬性
| 屬性 | 類型 | 預設值 | 說明 |
|---|---|---|---|
| size | 數字 字串 | 圖示大小，單位為 px | |
| icon | 字串 | 自訂圖示類別 | |
| f7 | 字串 | F7 圖示字型圖示名稱 | |
| material | 字串 | Material 圖示字型圖示名稱 | |
| ios | 字串 | 在使用 iOS 主題時要使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 f7:house | |
| md | 字串 | 在使用 Material 主題時要使用的圖示。由圖示系列和圖示名稱組成，中間以冒號分隔，例如 material:home | |
| tooltip | 字串 | 圖示 工具提示 文字，在將滑鼠游標移到圖示上或按下圖示時顯示 | |
| tooltipTrigger | 字串 | hover | 定義如何觸發 (開啟) 工具提示。可以是 hover、click 或 manual |
範例
<!-- Default back icon -->
<Icon icon="icon-back" />
<!-- Some custom icon -->
<Icon icon="icon-home" />
<!-- F7 Icons font icon -->
<Icon f7="house" />
<!-- Material Icons font icon -->
<Icon material="home" />
<!-- F7 icons font icon with custom size and color -->
<Icon f7="house" size="44px" color="blue" />
<!-- Conditional icon -->
<Icon ios="f7:house" md="material:home" />