Vuetifyでv-iconの実装部分でエラーを吐いた時の解決例

何が起きた？

chatgptにvuetifyでiconを出す方法を聞いたところ、下記のようなソースコードを教えてもらい、実装したところ図のようなエラーを出しました。

chatgptが教えてくれたソースコード

<template>
  <v-icon mdi="mdi-pencil"></v-icon>
</template>

エラー文

原因

mdi="mdi-pencil"ではなく、icon="mdi-pencil"が正しい書き方でした。

解決方法

以下のようなソースコードに直すことでエラーが解消されました。

正しいソースコード

<template>
  <v-icon icon="mdi-pencil"></v-icon>
</template>

根拠資料

公式リファレンスのv-iconのページ