I was making an inline svg according to Adam Wathan's youtube video tutorial. The svg image however is not working as expected, it should shrink when I give the classname values h-4 and w-4 however this seems to change the viewport size of the svg element and the underlining path remains the same size. here is a link to the codebox: https://codesandbox.io/s/tailwind-css-and-react-forked-ep4tpk?file=/src/App.js

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 items-center justify-center rounded-sm bg-black hover:bg-coral">
      <svg
        className="w-4 h-4 stroke-white"
        xmlns="http://www.w3.org/2000/svg"
        fill="current-color"
      >
        <path
          stroke="#fff"
          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>
  );
}

How can I get the icon to fully show the shopping cart on the black square?

CodePudding user response：

seem like SVG doesn't have a viewBox property

a sample SVG file:

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
  <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>