アイコン

フォントライブラリを変更するには、インスタンス生成時に iconfontオプションを追加します。

定義済みオプションを使用すると、選択されたプリセットに基づいてデフォルト値が事前読み込みされます。これは、デフォルトのicon値を持つコンポーネントのデフォルト値を上書きします。詳細については、デフォルトの アイコンプリセット値 を参照してください。

アイコンフォントの利用には、指定したアイコンライブラリが必要です（デフォルト指定時であっても）。これはCDNリンクを含めるか、アプリケーションにアイコンライブラリをインポートすることで実行できます。

これはVuetifyのデフォルトのアイコンフォントです。 CDNを使ってincludeできます。

あるいは、ローカル依存としてインストールします：

@mdi/js で指定されているSVG Pathを使用します。これは、アプリケーションを運用環境用に最適化する場合に推奨されるインストールです。既定のアイコン以外のアイコンを使用する場合にのみ、このオプションを含める必要があります。

mdiSvg アイコンフォントを指定:

カスタム インポートできるのは、バンドル サイズを大幅に小さくするために使用するアイコンのみです。

インストールは上記と同じです。ビルド処理のないプロジェクトの場合は、CDN からアイコンをインポートすることをお勧めします。

あるいは、yarnまたはnpmを使用してローカルにインストールすることができます。これは公式のGoogleリポジトリではなく、更新できない可能性があることを覚えておいてください

Once you have installed the package, import it into your main entry js file. This is typically the main.js, index.js or app.js located in your src/ folder. If you are using an SSR application, you may have a client.js or entry-client.js file.

FontAwesomeを使い始める最も簡単な方法は、cdnを使用することです。メインのindex.htmlのhead内に、次のスニペットを配置します。

好みのパッケージマネージャーで FontAwesome の 無料版 をローカル環境にインストールすることができます。

メインエントリポイント内で、パッケージの all.css をインポートするだけです。設定済みのwebpackプロジェクトを使用している場合、webpack css loader を使用して .cssファイルのサポートをセットアップする必要があります。 Vue CLIを使用している場合は自動的に行われます。

上記と同じです。cdn を使用して FontAwesome をインストールするのが最も簡単な方法です:

FontAwesome4 のインストールは、新しいバージョンと同じで、別のリポジトリからインストールするだけです。 @fortawesomeとは対照的に、font-awesome repoをターゲットにします。

プロジェクトでcssを認識する必要があることを忘れないでください。Webpack を使用している場合は、 css loader をインストールしてセットアップします。

Add required dependencies.

Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.

アプリケーションが Vuetify コンポーネントでカスタムアイコンを呼び出しているとします。ラッパーコンポーネントを作成したり、コンポーネントが表示されるたびに特定のアイコンを手動で定義したりする代わりに、グローバルレベルで構成できます。

アプリケーションが Vuetify コンポーネントでカスタムアイコンを呼び出しているとします。ラッパーコンポーネントを作成したり、コンポーネントが表示されるたびに特定のアイコンを手動で定義したりする代わりに、グローバルレベルで構成できます。

Vuetify は、提供されたアイコン文字列を 自動的 に利用可能なプリセットプールにマージします。これにより、global icons を参照するだけで、アプリケーションで利用できるカスタム文字列を作成することができます。

これは、与えられた文字列が与えられたときに、アプリケーションが常に特定のアイコンを使用することを保証するのに役立ちます。このシステムで <v-icon>を使う方法をいくつか紹介します。

独自のカスタムコンポーネントで同じアイコン文字列を使用できます。$vuetify.icons (またはショートカット $) が vtext_、 _vhtml またはテキストとして渡されるたびに、 <v-icon> は指定された値を検索します。これにより、構築が簡単で管理しやすいカスタマイズされたソリューションを作成できます。

Font Awesome Proでコンポーネントアイコンを利用して、個々のアイコンの重みを選択できます:

提供されているアイコンフォントプリセットの代わりに、独自のコンポーネントアイコンを使用できます。Vuetify コンポーネントで使用されているアイコンは、独自に切り替えることもできます。

SVGアイコンに色を継承させ、正しくスケールさせたい場合は、以下のCSSを追加してください:

一部のMaterial Iconsはデフォルトで欠落しています。たとえば、personとperson_outlineはそれぞれ使用できます。しかしvisibilityは使用できますが、visibility_outlineは使用できません 。不足しているMaterial Iconsを使用するには、以下のフォントを含めます（既に登録されている場合は別のマテリアルフォントを削除します）。

カスタムコンポーネントを追加できます。 @/components/MaterialIcon.vue と仮定します。

つづいて、必要なMaterial iconsを正確に登録する必要があります。

そうすることで、このようにMaterial iconsを使用できます。