アイコン Vue コンポーネント

Icon Vue コンポーネントは、アイコン要素を表します。カスタムアイコン、Framework7 アイコン、およびマテリアルアイコンで使用できます。

アイコンコンポーネント

次のコンポーネントが含まれています。

f7-icon

アイコンのプロパティ

プロパティ	型	デフォルト	説明
size	数値文字列		アイコンサイズ（px）
icon	文字列		カスタムアイコンクラス
f7	文字列		F7アイコンフォントアイコンの名前
material	文字列		マテリアルアイコンフォントアイコンの名前
ios	文字列		iOSテーマが使用されている場合に使用されるアイコン。アイコンファミリーとアイコン名をコロンで区切ったもの（例：`f7:house`）
md	文字列		マテリアルテーマが使用されている場合に使用されるアイコン。アイコンファミリーとアイコン名をコロンで区切ったもの（例：`material:home`）
tooltip	文字列		アイコンのツールチップテキスト（アイコンにホバー/クリックしたときに表示）
tooltip-trigger	文字列	hover	ツールチップの表示（トリガー）方法を定義します。`hover`、`click`、`manual` のいずれかになります。

例

<!-- 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>

このドキュメントを改善する

このページについて

アイコンコンポーネント
アイコンのプロパティ
例