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

Icon Vueコンポーネントは、Icon要素を表します。カスタムアイコン、Framework7 Icons、Material Iconsと一緒に使用することができます。

アイコンコンポーネント

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

f7-icon です。

アイコンのプロパティ

Prop	Type	Default	Description
size	number string		アイコンのサイズ（px
icon	string		カスタムアイコンクラス
f7	string		F7アイコンのフォントアイコンの名前
material	string		Material Iconsのフォントアイコン名
ios	string		iOSテーマを使用している場合に使用されるアイコンです。アイコンファミリーとアイコン名をコロンで区切ったものです。
md	string		Materialテーマを使用した場合のアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったもので構成されます。
aurora	string		Auroraテーマの場合に使用されるアイコンです。アイコンファミリーとアイコンの名前をコロンで区切ったもので構成されます。
tooltip	string		アイコン tooltip アイコンが押されたときに表示されるテキストです。
tooltip-trigger	string	hover	どのようにしてツールチップを開くかを定義します。hover`,` click`,` manual` のいずれかです。

例

<!-- デフォルトのバックアイコン -->
<f7-icon icon="icon-back"></f7-icon>

<!-- カスタムアイコン -->
<f7-icon icon="icon-home"></f7-icon>

<!-- F7アイコンのフォントアイコン -->
<f7-icon f7="house"></f7-icon>

<!-- マテリアルアイコンのフォントアイコン -->
<f7-icon material="home"></f7-icon>

<!-- F7アイコンのフォントアイコン（サイズと色をカスタマイズ -->
<f7-icon f7="house" size="44px" color="blue"></f7-icon>

<!-- 条件付きアイコン -->
<f7-icon ios="f7:house" aurora="f7:house" md="material:home"></f7-icon>