Vuetify

ショップ

企業向け

'v-icon' コンポーネントは、アプリケーションのさまざまな場面で使えるグリフの大規模なセットを提供します。利用可能なすべてのアイコンのリストについては、公式のMaterial Design Iconsページをご覧ください。これらのアイコンのいずれかを使用するには、単に 'mdi-' プレフィックスの後にアイコン名を付けて使用します。

アイコンは、2 つのテーマ (light, dark)と 5 つのサイズ (x-small, small, medium (デフォルト), large, x-large)で表現されます。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

Material Design もサポートされています。インストール方法の詳細については、こちらを参照 してください。

Font Awesome もサポートされています。'fa-' プレフィクス付きでアイコン名を使用するだけです。プロジェクトに Font Awesome icons を含める必要があることに注意してください。インストール方法の詳細については、インストールページ に移動してください。

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

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

v-icon にクリックイベントをバインドすると、自動的にカーソルがポインターになります。

@mdi/js パッケージを使用するアイコンのみを手動でインポートできます。VIconコンポーネントを持つ SVG アイコンを使用する場合は、 こちら で使用する方法を参照してください。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!