Property 'xmlns' does not exist on type 'IntrinsicAttributes...' - TypeScript

[RemyMachado]

I'm surprised I couldn't find any issue mentioning it. The 'xmlns' attribute triggers a typescript error (TS2322).

<Svg xmlns="http://www.w3.org/2000/svg" width={1242.667} height={974.667} viewBox="0 0 932 731" {...props}>
      <Path d="M673.5 3.9c.2.5 1.8 1.1 3.4 1.4 1.6.3 3.6 1.4 4.5 2.3.9.9 1.9 1.4 2.2 1.1.8-.8-5-4.6-8-5.1-1.4-.3-2.4-.1-2.1.3zM205.5 9.2c-7.5 2.6-10.3 4.4-16 9.7-16.2 15.1-16.6 38.6-.9 54.5 21.7 22.1 61.1 16 73.8-11.4 2.6-5.7 3-7.6 2.9-15.5 0-7.5-.4-9.9-2.5-14.7C258 21.5 248.6 13 237.2 9.1c-8.6-2.9-23.2-2.9-31.7.1zm22.7.8c13.3 1.9 24.7 9.8 30.8 21.2 3.2 5.8 3.4 7 3.4 15.3 0 8.2-.3 9.6-3.1 15-10.5 20.1-35.7 28.2-56.7 18.1-16.4-7.9-24.7-22.9-21.7-39.2 2.8-15.2 16.1-27.6 32.7-30.3 6.8-1.2 7.1-1.2 14.6-.1zM662.5 8.1c-1.1 1.6-.1 1.9 1.3.3.7-.8.8-1.4.3-1.4s-1.3.5-1.6 1.1z" />
</Svg>

[demedos]

Same. Temporarily solved it by creating a react-native-svg.d.ts file and extending the inferface.

import 'react-native-svg';
declare module 'react-native-svg' {
  export interface SvgProps {
    xmlns?: string;
    xmlnsXlink?: string;
  }
}

[brianwachira]

Same. I temporarily solved it by creating a react-native-svg.d.ts file and extending the inferface.

import 'react-native-svg';
declare module 'react-native-svg' {
  export interface SvgProps {
    xmlns?: string;
    xmlnsXlink?: string;
  }
}

Please note that making the attributes required, typescript will complain about them being overwritten by the props destructuring that happens on the root <Svg ../> node. That suggests that props contains those attributes, but I couldn't find them anywhere in the code.

that's cool. Let me ask, where did you place your react-native-svg.d.ts file ?

[demedos]

@brianwachira You can place it anywhere you want, as typescript will pick all the declaration files it finds in the project.

[brianwachira]

Alright. I have done that. Now I am getting an error about

None of these files exist:

• node_modules/react-native-svg/src/elements/Circle(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
• node_modules/react-native-svg/src/elements/Circle/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

Currently figuring out where the problem could be

[brianwachira]

None of these files exist:

* node_modules/react-native-svg/src/elements

fixed this issue by reinstalling react-native-svg

[KooroshTorabi]

I use Nextjs and load SVG as component but maybe this is useful for you: add this to custom.d.ts or your config file, it worked for me :

declare module '*.svg' {
    import React = require('react');
    export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
    const src: string;
    const content: any;
    const viewBox: string;
    const width: string;
    const height: string;
    export default content;
    export default src;
  }

[hassan-scholarden]

import 'react-native-svg'; declare module 'react-native-svg' { export interface SvgProps { xmlns?: string; xmlnsXlink?: string; } }

it will be in root folder

[dijonkitchen]

Doesn't the namespace have actual meaning? Couldn't it impact it's rendering or relationship with other elements? Or does this not matter given it's being used in a native environment?

https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

[muhimron90]

@demedos thanks...

Same. Temporarily solved it by creating a react-native-svg.d.ts file and extending the inferface.

import 'react-native-svg';
declare module 'react-native-svg' {
  export interface SvgProps {
    xmlns?: string;
    xmlnsXlink?: string;
  }
}

a bit modified...

//svg.types.ts
import {type SvgProps} from 'react-native-svg';
export interface ISvgProps extends SvgProps {
  xmlns?: string;
  xmlnsXlink?: string;
  xmlSpace?: string;
}
//svgComp.tsx
const SvgComp= (props: ISvgProps) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={250}
    height={250}
    viewBox="0 0 250 250"
    xmlSpace="preserve"
    {...props}>
   //....
   ...//
  </Svg>
);

[chulanovskyi]

Wondering why this xmlns, pretty common, property was not added to the library itself? 👀

[Sameer447]

`import {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG'; const MainLogo: React.FC = () => { return ( <Svg width="200" height="66" viewBox="0 0 200 66" fill="none" xmlns="http://www..org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"

) }`

By importing this

import {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG resolve the issues