Градиент становится плохим при преобразовании SVG в React JS компонент

Question

Я пытаюсь преобразовать SVG в реакцию JS Компонент. Я планирую использовать стилизованный компонент для динамического изменения стоп-цвета в градиенте с помощью поставщика тем.

В настоящее время я столкнулся с проблемой при преобразовании обычного реагирующего компонента в стилизованный компонент. SVG работает нормально при использовании обычных компонентов реакции.

ниже приведен код для справки.

import React from "react";
import styled from 'styled-components';

const Stop = styled.stop`
stop-color:${props=>props.stopColor1}
stop-opacity:${props=>props.stopOpacity1}
`;

const LinearGradient = styled.linearGradient`

`;

function Icon() {

  return (

    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      width="210mm"
      height="297mm"
      version="1.1"
      viewBox="0 0 210 297"
    >
      <defs>
        <LinearGradient id="a">
          <Stop offset="0" stopColor1="#333" stopOpacity1="1"></Stop>
          <Stop offset="0.482" StopColor1="#0a4" StopOpacity1="1"></Stop>
          <Stop offset="0.824" StopColor1="#008033" StopOpacity1="1"></Stop>
          <Stop offset="1" StopColor1="#4d4d4d" StopOpacity1="1"></Stop>
        </LinearGradient>
        <radialGradient
          id="b"
          cx="104.983"
          cy="46.255"
          r="105.305"
          fx="104.983"
          fy="46.255"
          gradientTransform="matrix(.51324 -1.0737 1.07087 .51188 1.569 135.299)"
          gradientUnits="userSpaceOnUse"
          xlinkHref="#a"
        ></radialGradient>
      </defs>
      <path
        fill="url(#b)"
        stroke="#000"
        strokeLinecap="butt"
        strokeLinejoin="miter"
        strokeOpacity="1"
        strokeWidth="0.265"
        d="M.189 92.536c77.425-99.993 79.417 8.327 118.685-38.575 65.852-78.093 36.944 31.208 91.28-32.884l-.377-21.355L-.19.1z"
      ></path>
    </svg>
  );
}

export default Icon;