语法错误：未知：默认情况下不支持命名空间标签

Question

尝试将 svg 作为 React 组件下载时出现以下错误。

语法错误：未知：默认情况下不支持命名空间标记。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;

是什么原因 ？

Answer 1

在 SVG 文件中，尝试更改：

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

等等...

这个想法是创建camelCase 属性，请记住，您正在使用JSX，而不是像XML 那样创建字符串。

Answer 2

最简单的解决方案是将 SVG 文件转换为 JSX。然后创建一个单独的组件或仅复制粘贴标签。这个网站完美地完成了这项工作。

https://svg2jsx.com/

Answer 3

因为我们在 JSX 操场上，所以你的 SVG 标签应该写成驼峰式

因此，您可以使用以下链接轻松优化 SVG 以避免此错误:)

svgminify

Answer 4

这是一个很好的工具，可以将 SVG 转换为反应友好的组件，并包括对 typescript 的支持

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

Answer 5

在我看来，我必须改变：

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

到

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