Next.js项目中使用Tailwind无法修改Heroicons的Icon元素高度问题

问题根因 #

Heroicons 内置的 SVG 图标默认使用正方形的 viewBox 配置，当你设置的宽高比例和 viewBox 比例不一致时，SVG 默认的缩放规则会导致图标溢出拉伸，最终占满全屏。你设置 w-5 h-5 时宽高比例和 viewBox 匹配，所以显示正常。

解决方案 #

• 方案1：同步宽高比例
  如果不需要非正方形的图标，直接将宽度也修改为和高度一致的值即可：

  <div>
     <HomeIcon className='w-9 h-9'/>
  </div>
  

• 方案2：强制保持图标比例，父容器约束尺寸
  如果确实需要固定父容器高度为h-9，可让图标自适应父容器尺寸，自动按比例缩放：

  <div className="w-5 h-9 flex items-center justify-center">
     <HomeIcon className='w-full h-auto shrink-0'/>
  </div>
  

• 方案3：显式指定缩放规则
  给图标组件添加 preserveAspectRatio 属性，强制按比例居中缩放，避免拉伸：

  <div>
     <HomeIcon className='w-5 h-9' preserveAspectRatio="xMidYMid meet"/>
  </div>
  

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