I have the following gradient definition:

 <linearGradient id='landing-page-svg-gradient' x2='1' y2='1'>
            <stop offset='0%' stopColor='#C6FFDD' />
            <stop offset='50%' stopColor='#FBD786' />
            <stop offset='100%' stopColor='#f7797d' />
          </linearGradient>

I use it as follows to make my svg icon of gradient stroke:

  <Calculator
        style={{
          stroke: 'url(#landing-page-svg-gradient) #447799',
        }}
      />

The svg result is this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calculator" style="stroke: url("#landing-page-svg-gradient") rgb(68, 119, 153);"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg>

but the graphical result is not satisfactory as only border of calulator is gradient – how to fix that?