Gradient stroke problem

[ivanvinicius]

I trying to apply a gradient stroke to my icons, but I'm doing it wrong, or maybe it has a bug.

Here is my code:

//My gradient svg
// tailwind colors amber-300  amber-400
export function GradientFill() {
  return (
    <svg display="block" width="0" height="0">
      <linearGradient id="gradient" x1="100%" y1="100%" x2="0%" y2="0%">
        <stop stopColor="#fcd34d" offset="40%" />
        <stop stopColor="#f59e0b" offset="80%" />
      </linearGradient>
    </svg>
  )

// And then I import this file in my app.tsx, to provide this svg globally. My app file below
import type { AppProps } from 'next/app'
import { Nunito, Cookie } from 'next/font/google'

import '~/styles/globals.css'
import { GradientFill } from '~/components/GradientIcon/GradientFill'

const nunito = Nunito({ subsets: ['latin'] })
const cookie = Cookie({ weight: '400', subsets: ['latin'] })

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>
        {`
          :root {
            --nunito-font: ${nunito.style.fontFamily};
            --cookie-font: ${cookie.style.fontFamily};
          }
        `}
      </style>
      <GradientFill />
      <Component {...pageProps} />
    </>
  )
}
}

// So I created a GradientIcon component where a apply the svg to the icons dynamically. Here is the code:
import { LucideProps } from 'lucide-react'
import { ElementType } from 'react'

interface Props extends LucideProps {
  icon: ElementType
}

export function GradientIcon({ icon: Icon, ...rest }: Props) {
  return <Icon style={{ stroke: 'url(#gradient)' }} {...rest} />
}


// Using the GradientIcon component im my page 
<GradientIcon icon={ArrowUpAZ} size={18} />

Now let's talk about the problem:

Some parts of my Icons dissapear when I apply the gradient stroke, see in the image below:

If I remove the gradient stroke it works perfect

if you want to check the html rendered

<svg
 xmlns="http://www.w3.org/2000/svg" 
width="40" 
height="40" 
viewBox="0 0 24 24" 
fill="none" 
stroke="currentColor" 
stroke-width="2" 
stroke-linecap="round" 
stroke-linejoin="round" 
class="lucide lucide-arrow-up-az" 
style="stroke: url(&quot;#gradient&quot;);">

<path d="m3 8 4-4 4 4"></path>
<path d="M7 4v16"></path>
<path d="M20 8h-5"></path>
<path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10"></path>
<path d="M15 14h5l-5 6h5"></path>

</svg>

[karsa-mistmere]

How peculiar. 🤔
This seems to only affect lines that are perfectly horizontal or vertical, as soon as I add even a fraction of width or height, the lines show up:

Evidently, you have to use gradientUnits="userSpaceOnUse" on the <LinearGradient>:
https://stackoverflow.com/questions/13223636/svg-gradient-for-perfectly-horizontal-path

I've tested it, and it works: https://jsfiddle.net/2uebdtw3/1/

[ivanvinicius]

Okay, it works, thank you