SyntaxError：未知：默认情况下不支持命名空间标签

Question

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

SyntaxError：未知：默认情况下不支持命名空间标签。 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;

是什么原因 ？

原文由 Silicum Silium 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 SVG 文件中， 尝试更改：

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

ETC…

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

原文由 Frawel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

因为我们在 JSX 游乐场，所以你的 SVG 标签应该写成驼峰命名法

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

缩小

原文由 Ahmad Salih 发布，翻译遵循 CC BY-SA 4.0 许可协议