I’m trying to add the gradient on text for my svg image.

Here’s my svg image:

i’ve uploaded here in png format
That’s the way I’m trying to do that:

export const HawllIcon: React.FC<IconSvgProps> = ({
  size = 100,
  width,
  height,
  ...props
}: IconSvgProps) => (
  <svg
    height={size || height}
    preserveAspectRatio="xMidYMid meet"
    version="1.0"
    viewBox="0 0 800 500"
    width={size || width}
    {...props}
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient id="MyGradient" x1="0%" x2="100%" y1="0%" y2="100%">
        <stop offset="5%" stopColor="#ff9459" />
        <stop offset="95%" stopColor="#006fee" />
      </linearGradient>
    </defs>
    <g
      fill="url(#MyGradient)"
      stroke="none"
      transform="translate(0,500) scale(0.1,-0.1)"
    >
      <path
        d="M140 2490 l0 -700 195 0 195 0 0 275 0 275 275 0 275 0 0 -275 0
  -275 195 0 195 0 0 700 0 700 -195 0 -195 0 0 -260 0 -260 -275 0 -275 0 0
260 0 260 -195 0 -195 0 0 -700z"
      />
      <path
        d="M2181 3148 c-10 -24 -141 -320 -291 -658 -150 -338 -281 -634 -291
  -658 l-18 -42 201 2 201 3 203 505 203 505 16 -40 c9 -22 101 -249 204 -505
l187 -465 203 -3 c191 -2 203 -1 197 15 -4 10 -143 325 -309 700 l-302 683
-193 0 -193 0 -18 -42z"
      />
      <path
        d="M3133 3183 c3 -5 73 -219 157 -478 83 -258 155 -473 158 -477 4 -4
54 119 111 273 l104 281 -64 204 -63 204 -204 0 c-112 0 -201 -3 -199 -7z"
      />
      <path
        d="M3883 2490 l-231 -700 176 0 177 0 139 425 c77 234 143 421 146 415
4 -6 31 -89 61 -185 29 -96 57 -171 60 -167 3 4 48 121 98 261 l92 254 -62
198 -62 199 -181 0 -181 -1 -232 -699z"
      />
      <path
        d="M5055 3178 c-3 -7 -70 -215 -150 -463 -80 -247 -180 -553 -221 -680
  -40 -126 -74 -233 -74 -237 0 -4 82 -8 183 -8 l183 0 222 685 c122 376 225
691 228 700 5 13 -16 15 -180 15 -140 0 -188 -3 -191 -12z"
      />
      <path
        d="M5580 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
      />
      <path
        d="M6800 2490 l0 -700 530 0 530 0 0 155 0 155 -335 0 -335 0 0 545 0
545 -195 0 -195 0 0 -700z"
      />
    </g>
  </svg>
);

But I’m only achieving this:

And I’m trying to achieve that:

What do I need to do to get things done?

I’ve tried to:

• change fill to almost every variation of this gradient,
• change the gradientUnits both ways: objectBoundingBox & userSpaceOnUse and none of them does the thing correctly.