JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background:white">
You should see a <b>small</b> (20px tall) purple rectangle and square here. They should NOT be huge.
<svg height="600" width="600">
  <!-- width/height here override the ones from the cloned element-->
  <use width="40" height="20" xlink:href="#search-icon"></use>
  <!-- This one should use width/height from the cloned element-->
  <use y="40" xlink:href="#search-icon"></use>
</svg>

<svg>
  <!-- This small width and height should be preserved in the
       <use> element's clone, unless overridden by attributes on the
       <use> element itself, as noted at
       https://svgwg.org/svg2-draft/struct.html#SymbolElement -->
  <symbol width="20" height="20" id="search-icon">
    <!-- This rect will fill the clone to show us how big it is. -->
    <rect height="100%" width="100%" fill="purple" stroke="black">
    </rect>
  </symbol>
</svg>
</body>