el-button传入icon用法可能会出现的问题

el-button传入icon用法可能会出现的问题

在项目中，使用 el-button 的 icon 属性渲染按钮图标时，大分辨率下显示正常，但切换到小分辨率后，图标尺寸异常。

异常原因

初次渲染时，el-button 通过 icon="el-icon-search" 挂载 <svg> 元素，尺寸和样式跟随父级字体大小（通常为 14px），显示正常。

切换到小分辨率后，父级容器（如 flex、grid 布局）被压缩，el-button 重新渲染，<svg> 元素被重新挂载，内部 font-size 计算为较小值（8.75px），SVG 的 width="1em" 随之缩放，导致渲染出 8.75x8.75 的图标。

尝试修复：使用 v-show 替代 v-if

为避免重新渲染，将显隐逻辑从 v-if 改为 v-show：

<el-button v-show="showButton" icon="el-icon-search" />

优点在于元素始终在 DOM 中，不会重新挂载 <svg>，切换大屏小屏时避免了父级样式重新计算。

但首次进入小屏后，若父级布局未能正确计算 SVG 尺寸（依然为 8.75x8.75），即使切回大屏，图标也不会恢复原大小。因为 v-show 只是切换 display: none，浏览器在 display:none → display:block 时不会触发 SVG 重新渲染，图标尺寸异常被“固化”。

解决方案：使用插槽写法固定尺寸

ElementPlus 提供了 #icon 插槽，可以完全替代 icon="xxx" 的写法。直接使用 <el-icon> 并强制指定尺寸：

<el-buttonv-show="showButton"style="position: absolute; right: 34px; bottom: 38px"roundtype="primary"
><template #icon><el-icon :size="14"><Search /></el-icon></template>
</el-button>