Icon

v-iconコンポーネントは、あなたのアプリケーションの様々な場面に応じて多くのアイコンを提供します。Vuetifyのアイコンは、GoogleのMaterial Iconsライブラリを使用します。 全ての利用可能なアイコンのリストは、公式のMaterial Iconsページをご覧ください。

Usage

Icons come in two themes (light and dark), and four different sizes (standard, medium, large, and x-large). If you want to use SVG icons with VIcon component, read about using SVG icons with VIcon here.

API

v-icon
Name
color
Default
undefined
Type
string

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(255, 0, 0, 0.5))を設定できます。

Name
dark
Default
false
Type
boolean

ダークテーマを適用します。

Name
disabled
Default
false
Type
boolean

Mixins.Input.props.disabled

Name
large
Default
false
Type
boolean

アイコンのサイズを大 (36px) にします。

Name
left
Default
false
Type
boolean

ボタン内部でアイコンを使用する場合に、アイコンを左に配置します。

Name
light
Default
false
Type
boolean

ライトテーマを適用します。

Name
medium
Default
false
Type
boolean

アイコンのサイズを中 (28px) にします。

Name
right
Default
false
Type
boolean

ボタン内部でアイコンを使用する場合に、アイコンを右に配置します。

Name
size
Default
undefined
Type
number | string

Components.Icons.

Name
small
Default
false
Type
boolean

アイコンのサイズを小 (16px) にします。

Name
x-large
Default
false
Type
boolean

アイコンのサイズを最大 (40px) にします。

Examples

Font Awesome

Font Awesome のアイコンの利用をサポートしています。アイコン名にfa-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにFont Awesomeを導入しておく必要があるので注意して下さい。

Material Design Icons

Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。

カラーヘルパーを使用すると、アイコンの色を標準のdark、lightテーマから変更できます。

ボタン

アイコンをボタン内部で使用し、ボタンを強調させるための動きを付けることができます。

Clickable

Binding any click event to v-icon will automatically change the cursor to a pointer.

Edit this page | language on Github