component.js

// Make component accept props and add default color
function Icon({size, color = "#A41FAF", gradientColor = "#A41FAF"}) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      // Add default size
      width={size === "big" ? 96 : 48}
      height={size === "big" ? 62 : 31}
      viewBox="0 0 48 31"
    >
      <defs>
        <linearGradient
          id="linearGradient-1"
          x1="50%"
          x2="54.584%"
          y1="29.143%"
          y2="70.857%"
        >
          {/* Set gradient color */}
          <stop offset="0%" stopColor={gradientColor}></stop>
          <stop offset="100%" stopColor="#D8D8D8" stopOpacity="0"></stop>
        </linearGradient>
      </defs>
      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
        <g transform="translate(-736 -358)">
          <g transform="translate(120 176)">
            <g transform="translate(595 148)">
              <g transform="translate(22.83 35.64)">
                <path
                  fill="url(#linearGradient-1)"
                  d="M.102 14.765c.334-3.111 2.907-4.224 7.72-3.338l.741.142.897.184 1.673.362.61.123.278.05.261.04.246.032.232.021.22.01.206-.002c.368-.016.681-.096.969-.262l.154-.1c.127-.09.25-.198.37-.328l.145-.165.145-.186a5.28 5.28 0 00.073-.101l.146-.219.149-.241.075-.13.155-.276.16-.301.251-.5.46-.967 1.407-3.072.259-.55.128-.264.255-.502c.084-.162.168-.319.252-.47l.25-.44C20.862.13 22.603-.498 24.913.332l.312.12c.052.02.105.043.158.065l.322.145.33.16.338.175.347.19.355.203.364.218.374.23.778.497 1.033.685 2.287 1.542c4.894 3.28 9.092 2.506 12.594-2.325v26.507H0l.102-13.98z"
                  opacity="0.2"
                ></path>
                {/* Set color */}
                <path
                  stroke={color}
                  strokeLinecap="round"
                  strokeWidth="2"
                  d="M.102 14.765c.334-3.111 2.907-4.224 7.72-3.338 7.218 1.33 6.117 2.614 10.023-5.886C21.75-2.96 24.57-.36 31.91 4.56c4.894 3.282 9.092 2.507 12.594-2.324"
                ></path>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  );
}

// Rendering added in the component file for simplicity 
const domContainer = document.querySelector('#react');
ReactDOM.render([<Icon color={"#FEE12B"} gradientColor={"#FEE12B"} key={1} />, <Icon size={"big"} key={2} />, <Icon gradientColor={"#228B22"} key={3} />], domContainer);