구문 오류: 알 수 없음: 네임스페이스 태그는 기본적으로 지원되지 않습니다.

구문 오류: 알 수 없음: 네임스페이스 태그는 기본적으로 지원되지 않습니다.

리액트 컴포넌트로 svg를 다운로드하려고 하면 다음과 같은 오류가 발생합니다.

구문 오류: 알 수 없음: 네임스페이스 태그는 기본적으로 지원되지 않습니다.React의 JSX는 네임스페이스 태그를 지원하지 않습니다.'throwIfNamespace' 플래그를 켜면 이 경고를 무시할 수 있습니다.

import React from "react";
import { ReactComponent as LO } from "../a/Logo.svg"
import { NavLink } from "react-router-dom";

const Logo = () => (
  <>
    <NavLink to={"/"}>
     <LO width={"40px"} height={"40px"} />
    </NavLink>
  </>
);

export default Logo;

이유가 뭐야?

SVG 파일에서 다음을 변경해 봅니다.

    sketch:type TO sketchType
    xmlns:xlink TO xmlnsXlink
    xlink:href  TO xlinkHref

기타...

camelCase 속성을 작성하는 것이 기본입니다.XML과 달리 문자열을 작성하는 것이 아니라 JSX를 사용하여 작업하고 있다는 점에 유의하십시오.

JSX 플레이그라운드에 있기 때문에 SVG 태그는 camel Case로 기재되어 있어야 합니다.

따라서 다음 링크를 사용하여 SVG를 쉽게 최적화하여 이 오류를 방지할 수 있습니다.

svgminify로 하다

가장 간단한 해결책은 SVG 파일을 JSX로 변환하는 것입니다.그런 다음 별도의 구성요소를 만들거나 태그를 복사하여 붙여넣기만 하면 됩니다.이 웹사이트는 완벽하게 작동한다.

https://svg2jsx.com/

SVG 파일을 압축하려면 svgo를 사용할 것을 권장합니다.NodeJ와 함께 실행되며 저작권이 있는 SVG를 어디서나 업로드할 필요가 없는 심플한 CLI 도구입니다.

SVG를 반응 친화적인 컴포넌트로 변환하는 편리한 툴로, 타이프스크립트 지원도 포함되어 있습니다.

https://react-svgr.com/playground/

내 모든 svg 파일에 같은 문제가 있었어.Adobe Illustrator에서 파일을 열고 다시 저장하면 문제가 해결되었습니다.

나는 변해야 했다.

   xmlns:svg="http://www.w3.org/2000/svg"

로.

   xmlnsSvg="http://www.w3.org/2000/svg"

먼저 SVG 파일을 JSX로 변환한 후 사용해야 합니다.https://svg2jsx.com/ 를 사용합니다.

언급URL : https://stackoverflow.com/questions/59820954/syntaxerror-unknown-namespace-tags-are-not-supported-by-default