Vuetify3中v-list-item-content与v-list-item-icon的替代组件咨询

在Vuetify 3中，v-list-item-content和v-list-item-icon这两个组件已被移除，无需再用专门的组件包裹内容或图标，直接将图标、文本等元素放置在v-list-item内部即可。

写法对比示例： #

Vuetify 2 旧写法：

<v-list-item>
  <v-list-item-icon>
    <v-icon>mdi-home</v-icon>
  </v-list-item-icon>
  <v-list-item-content>
    <v-list-item-title>首页</v-list-item-title>
  </v-list-item-content>
</v-list-item>

Vuetify 3 新写法：

<v-list-item>
  <v-icon>mdi-home</v-icon>
  <v-list-item-title>首页</v-list-item-title>
</v-list-item>

如果需要调整元素布局或间距，可以使用Vuetify 3的内置工具类实现：

<v-list-item class="d-flex align-center">
  <v-icon>mdi-home</v-icon>
  <v-list-item-title class="ms-2">首页</v-list-item-title>
</v-list-item>

内容的提问来源于stack exchange，提问作者CraZyCoDer