How can I use this SVG in React without getting any error?

March 3, 2022

I want to use JavaScript SVG as an icon. However, I keep getting this error. I fixed one error by changing xmls:xlink into xmlsXlink. However, it did not work same for xml:space.

SVG code

<svg
  className="icon"
  xmlns="http://www.w3.org/2000/svg"
  xmlnsXlink="http://www.w3.org/1999/xlink"
  version="1.1"
  id="Layer_1"
  x="0px"
  y="0px"
  viewBox="0 0 85 85"
  style="enable-background:new 0 0 85 85;"
  xml:space="preserve"
>
  <polygon
    class="st0"
    points="6.3,1.2 13,75.4 42.4,83.8 72.1,75.4 78.9,1.2"
    fill="#FFF"
  />
  <g>
    <g transform="translate(4.988 -113.385)">
      <path
        d="M7.1,189.8l-6.9-76.4H75l-7,76.4l-30.6,8.6L7.1,189.8z M62.4,185.6l5.8-65.5H37.6l0.2,72.2 L62.4,185.6z M34.7,129.8h-7.4L27.2,169l-14.5-4v9l21.9,5.9L34.7,129.8L34.7,129.8z"
        fill="#D4B830"
      />
      <path
        d="M32.3,179.2c-1-0.3-5.7-1.6-10.6-2.9l-8.8-2.4v-4.4c0-4.3,0-4.4,0.4-4.3 c0.2,0.1,3.4,1,7.1,2l6.7,1.8l0.1-19.5l0.1-19.5h7.3v24.9c0,19.7-0.1,24.9-0.3,24.9C34.2,179.7,33.2,179.4,32.3,179.2L32.3,179.2z"
        fill="#EBEBEB"
        opacity="0.986"
        fill-opacity="0"
        enable-background="new"
      />
      <path
        d="M12.8,174v-9c0,0,9.2,2.6,14.4,3.9l0.1-39.1h7.4v50.1L12.8,174L12.8,174z"
        fill="#EBEBEB"
        opacity="0.986"
        fill-opacity="0.9216"
        enable-background="new"
      />
      <path
        d="M37.6,120.2h30.6l-5.8,65.5l-24.8,6.7V120.2z M60.8,174.6l2-24.5L48,151.8v-13.1l15.9-0.1 l0.6-8.9l-23.9,0.1l0.3,32.5l14.5-2.5l-0.2,7.2l-14.7,4l0.1,8.9L60.8,174.6L60.8,174.6z"
        fill="#FDD83C"
      />
    </g>
  </g>
</svg>