内联SVG添加Tailwind的h-4/w-4类后无法缩放，如何完整显示购物车图标？

云原生阿岚

2026-8-10

解决内联SVG添加Tailwind类后图标无法完整显示的问题

问题核心是你的SVG缺少viewBox属性——这是SVG实现自适应缩放的关键配置。没有它时，设置w-4 h-4只会调整SVG元素的容器尺寸，内部路径不会跟随适配容器边界，导致图标溢出。

修改步骤：

添加viewBox属性：根据你的path坐标范围，设置viewBox="0 0 24 18"（覆盖路径从x=0到24、y=0到18的所有区域，确保完整显示）。
优化样式配置：
- 移除path上的stroke="#fff"，改用Tailwind的stroke-white类统一控制描边颜色，保持样式一致性。
- 修正fill="current-color"为fill-none（你的图标是描边型，不需要填充）；若需要继承父元素颜色，可改为正确拼写的fill="currentColor"。
- 给外层黑色方块div添加flex类，让items-center和justify-center生效，确保SVG在方块内居中显示。

修改后的完整代码：

import React from "react";
import "./styles.css";
import "./styles/tailwind-pre-build.css";

export default function App() {
  return (
    <div className="mr-1 h-5 w-5 flex items-center justify-center rounded-sm bg-black hover:bg-coral">
      <svg
        className="w-4 h-4 stroke-white fill-none"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 18"
      >
        <path
          strokeWidth="1.5"
          d="m1 1 3.5 2 2 12m0 0h13L23 5c0-.8-10-.667-15-.5M6.5 15l1 1-.5 2.5h2m0 0h8.5m-8.5 0v1m11.5-1h-3m0 0v1m0 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-8.5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
        />
      </svg>
    </div>
  );
}