Why one part of my Svg sprite only show the background?

Question

My original picture is a light grey with a '>' symbol in it. But when I convert it to svg sprite on website https://svgsprit.es/. It turns to a full black circle.I have search this in stackoverflow and no similar answer yet.

original svg:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <defs>
    <style>.cls-1{fill:#393939;}.cls-2{fill:#fff;}</style>
  </defs>
  <circle class="cls-1" cx="25.5" cy="25.5" r="25.5"/>
  <rect class="cls-2" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"/>
  <rect class="cls-2" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"/>
</svg>

The sprite part:

<symbol id="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <defs></defs>
  <circle cx="25.5" cy="25.5" r="25.5"></circle>
  <rect x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
  <rect x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
</symbol>

Answer 1

Apparently svgsprit.es cannot handle the CSS styles you defined. If you use the style attributes for your SVG it works better:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
  <circle fill="#393939" cx="25.5" cy="25.5" r="25.5"/>
  <rect fill="#fff" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"/>
  <rect fill="#fff" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"/>
</svg>

Results in:

.icon {
  width: 50px;
  height: 50px;
  margin: .5em;
}

<svg width="0" height="0" class="hidden">
  <symbol id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51 51">
    <defs></defs>
    <circle fill="#393939" cx="25.5" cy="25.5" r="25.5"></circle>
    <rect fill="#fff" x="24.4" y="27.9" width="1.6" height="15.24" rx="0.8" transform="matrix(0.78, -0.63, 0.63, 0.78, -21.26, 15.39)"></rect>
    <rect fill="#fff" x="33.3" y="27.9" width="1.6" height="15.24" rx="0.8" transform="translate(24 -21.9) rotate(37.3)"></rect>
  </symbol>
</svg>

<svg class="icon">
  <use xlink:href="#test"></use>
</svg>