SVG能否继承父元素尺寸？Vuetify中SVG图标自适应父级大小实现

SVG完全支持继承父元素尺寸，你遇到的图标无法匹配标题高度的问题，本质是Vuetify默认给.v-icon__svg类写死了24px固定宽高，和SVG本身的能力无关。通过以下两种方式即可实现和原webfont图标一致的自动适配效果：

方案1：全局样式覆盖（推荐） #

在全局样式文件中覆盖默认的固定宽高配置，改用相对单位即可一劳永逸解决所有场景的图标适配问题：

.v-icon__svg {
  width: 1em;
  height: 1em;
  /* 可选：微调图标和相邻文字的垂直对齐，避免出现上下错位 */
  vertical-align: -0.15em;
}

这个方案的适配逻辑和原webfont图标完全一致：

• 1em等价于当前元素继承到的父级font-size值，标题字号多大，图标就会自动渲染为多大，不需要给不同级别的标题单独设置图标尺寸
• 框架默认已经配置了fill: currentColor，图标颜色会自动继承父级文字颜色，不需要额外处理

方案2：单图标按需配置 #

如果不想修改全局默认样式，只需要在需要自适应尺寸的v-icon组件上传入size="1em"即可：

<v-icon size="1em">{{ iconPath }}</v-icon>

组件会自动将该尺寸值应用到内部SVG元素上，实现单图标维度的父级尺寸继承。

内容的提问来源于stack exchange，提问作者Dónal