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

【问题标题】：SyntaxError: unknown: Namespace tags are not supported by defaultSyntaxError：未知：默认情况下不支持命名空间标签
【发布时间】：2020-05-06 07:47:53
【问题描述】：

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

SyntaxError: unknown: 默认不支持命名空间标签。 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;

是什么原因？

【问题讨论】：

第二次导入是什么，是这样导入的吗？？
create-react-app.dev/docs/adding-images-fonts-and-files
您的 SVG 在其元数据中包含命名空间标签。您可以删除它们。
@Jesus 请参考这个解决方案stackoverflow.com/questions/23402542/…
手动将 svg 属性更改为驼峰式很麻烦。在这里做svg2jsx.com

标签： reactjs svg

【解决方案1】：

在 SVG 文件中，尝试更改：

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

等等……

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

【讨论】：

【解决方案2】：

因为我们是在 JSX 游乐场，所以你的 SVG 标签应该写成 camelCase

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

svgminify

【讨论】：

这个答案有帮助！
链接已关闭。有没有其他选择？
@Nulldroid 是的，试试这个：svgminify.com
本网站不会将标签转换为驼峰式。

【解决方案3】：

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

https://svg2jsx.com/

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

我的所有 svg 文件都有同样的问题。在 Adobe Illustrator 中打开它们并再次保存即可解决问题。

【讨论】：

【解决方案5】：

我建议使用svgo 来压缩您的 SVG 文件。使用 NodeJS 运行的简单 CLI 工具，无需您在任何地方上传受版权保护的 SVG。

【讨论】：