Vuetify 2.6.7中v-icon自定义类失效及结构变化问题求助

问题根源 #

2.6.7版本给v-icon新增了一层<span>包裹svg，这层节点不仅阻断了部分样式继承，还会被Vuetify自带的高优先级样式覆盖，直接导致自定义类失效，甚至引发位置错乱。

可行解决方法 #

• 用深度选择器穿透Scoped样式
  如果你在Vue组件里用了Scoped CSS，必须通过深度选择器才能选中v-icon内部的span和svg，不同预处理器写法如下：

  • 原生CSS：::v-deep .你的自定义类
  • Sass/Scss：::v-deep .你的自定义类 或 /deep/ .你的自定义类
  • Less：/deep/ .你的自定义类

  示例代码：

  <template>
    <v-icon class="custom-icon">mdi-home</v-icon>
  </template>
  
  <style scoped>
  /* 控制svg的宽高和颜色 */
  ::v-deep .custom-icon svg {
    width: 28px;
    height: 28px;
    color: #2196f3;
  }
  
  /* 修复位置错乱：调整span的布局方式 */
  ::v-deep .custom-icon span {
    display: inline-flex;
    vertical-align: middle;
  }
  </style>
  

• 优先使用v-icon自带props
  Vuetify本身提供了size、color等props来控制图标样式，用官方方案能完全避开DOM结构变化的影响：

  <v-icon size="28" color="blue">mdi-home</v-icon>
  

• 全局样式定义（应急方案）
  把自定义类写在全局样式文件（比如main.css）里，不需要深度选择器就能直接生效，缺点是样式会全局生效，注意命名冲突：

  /* main.css */
  .custom-icon svg {
    width: 28px;
    height: 28px;
    color: #2196f3;
  }
  

排查小技巧 #

• 打开浏览器开发者工具，查看v-icon的DOM结构，检查自定义类的样式是否被划掉（被更高优先级样式覆盖），如果是，可临时加!important应急（不推荐长期使用），或者调整选择器优先级。
• 如果是自定义SVG图标，先检查SVG代码里有没有硬写的width/height属性，这些会直接覆盖外部样式，删掉即可。

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