# Icons
v-icon コンポーネントは、アプリケーションのさまざまな側面にコンテキストを提供するために、グリフの大きなセットを提供します。 利用可能なすべてのアイコンの一覧については、公式の Material Design Icons ページをご覧ください。 これらのアイコンのいずれかを使用するには、単純に mdi- プレフィックスに続いて アイコン名を使用します。
# 使い方
アイコンは、2 つのテーマ （light, dark）と 5 つのサイズ （x-small, small, medium （デフォルト）, large, x-large）で表現されます。
# API
# サンプル
# Props
# 色
カラーヘルパーを使用すると、アイコンの色を標準のdark、lightテーマから変更できます。
# イベント
# クリック
v-icon にクリックイベントをバインドすると、自動的にカーソルがポインターになります。
# その他
# Font Awesome
Font Awesome もサポートされています。 アイコン名の fa- プレフィックスを使用するだけです。 Font Awesome iconsをプロジェクトに含める必要がありますので、ご注意ください。 インストール方法の詳細については、 インストールページ を参照してください。
# マテリアルデザイン
Material Design もサポートされています。 インストール方法の詳細については、 こちらをご覧ください。
# MDI SVG
@mdi/js パッケージを使用するときに、実際に使用するアイコンのみを手動でインポートできます。 VIcon コンポーネントで SVG アイコンを使用したい場合は、それらの 使用方法についてご確認ください。
# アクセシビリティ
アイコンはあらゆる種類の有意義な情報を伝えることができるので、可能な限り多くの人に届くことが重要です。 考慮したいユースケースが2つあります:
Decorative Icons は視覚的な補強やブランディングにのみ使用されています。 それらがページから削除された場合でも、ユーザーはあなたのページを理解して使うことができます。
Semantic Icons は、純粋な装飾だけではなく、意味を伝えるために使っているものです。 これには、ボタン、フォーム要素、トグルなど、インタラクティブコントロールとして使用されるテキストのないアイコンが含まれます。
WAI-ARIA Authoring Practices 1.1では、 aria-hidden="false" は現在 ブラウザ間で一貫性のない動作をする と述べられています。
WIP: 私たちのチームは、label プロパティを渡したときに aria-hidden="false" をレンダリングしないようにコンポーネントを変更します。
# Decorative Font Icons
あなたのアイコンが純粋に装飾的なものである場合は、それぞれのアイコンにアクセスできるように、手動で属性を追加する必要があります。aria-hidden (vuetifyによる自動処理)
# Semantic Font Icons
アイコンに意味がある（セマンティック）場合は、(類似した) 要素内の代替テキストを指定する必要があります。 また、支援技術にアクセスできるようにしながら、要素を視覚的に非表示にする適切なCSSを含まれています。
<v-icon aria-hidden="false">
mdi-account
</v-icon>
# Decorative SVG Icons
あなたのアイコンが純粋に装飾的なものである場合は、それぞれのアイコンにアクセスできるように、手動で属性を追加する必要があります。aria-hidden (vuetifyによる自動処理)
# Semantic SVG Icons
v-icon コンポーネントに role="img" などのアクセシビリティ属性を適用して、意味（セマンティック）を持たせます。
<v-icon aria-label="My Account" role="img" aria-hidden="false">
mdiAccount
</v-icon>
<script>
import { mdiAccount } from "@mdi/js";
export default {
data: () => ({
icons: {
mdiAccount
}
})
};
</script>