Potential conflicts with svg elements

There’s a few svg tags that might conflict with react-three-fiber like line, path, and mesh (see: https://developer.mozilla.org/en-US/docs/Web/SVG/Element)

I’ve just been using Three’s Line element and VSCode seems to think it’s an svg element. Thankfully it uses the Three component I want, but what if I want to use svg in the future?

[asparagii]

Typescript complains about it though!

I’m trying to use fiber’s <line>, but Typescript thinks it’s a JSX.IntrinsicElements.line: React.SVGProps<SVGLineElement>, which of course is not.

Ignoring the line with a @ts-ignore works, of course, but it’s kind of annoying

[asparagii]

import { extend } from 'react-three-fiber';
import { Line } from 'three';

// Add class `Line` as `Line_` to react-three-fiber's extend function. This
// makes it so that when you use <line_> in a <Canvas>, the three reconciler
// will use the class `Line`
extend({ Line_: Line });

// declare `line_` as a JSX element so that typescript doesn't complain
declare global {
    namespace JSX {
        interface IntrinsicElements {
            'line_': ReactThreeFiber.Object3DNode<Line, typeof Line>,
        }
    }
}

After doing this somewhere in your application you can use <line_> instead of <line> and Typescript won’t get confused.