React项目中无法导入SVG Logo问题求助

错误原因 #

1. SVG文件包含sodipodi:、inkscape:这类非标准命名空间标签/属性，React JSX默认不支持这类命名空间语法
2. 你的NavLogoImg是styled的div组件，但未正确将SVG作为背景图应用

解决方案 #

一、处理SVG的命名空间问题 #

方法1：手动清理SVG文件

打开logo-light.svg，删除所有非标准SVG内容：

• 删除带命名空间的属性：比如sodipodi:docname、inkscape:version
• 删除带命名空间的标签：比如整个<sodipodi:namedview>标签
• 删除多余的命名空间声明：比如xmlns:inkscape、xmlns:sodipodi

只保留标准SVG结构（<svg>、<defs>、<linearGradient>等核心标签）。

方法2：配置svgr忽略命名空间检查

• 如果用Create React App，在package.json中添加配置：

{
  "svgr": {
    "throwIfNamespace": false
  }
}

• 如果是自定义Webpack配置，修改@svgr/webpack的loader选项：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              throwIfNamespace: false
            }
          }
        ]
      }
    ]
  }
};

二、修正styled-components的用法 #

因为NavLogoImg是div组件，需要将SVG作为背景图引入，修改代码如下：

方式1：动态传递背景图

App页面代码：

import myLogo from "../../images/logo-light.svg";
<NavLogoImg style={{ backgroundImage: `url(${myLogo})` }} />

方式2：在styled组件中接收img属性

styled-components代码：

export const NavLogoImg = styled.div`
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 97%;
  background-image: url(${props => props.img});
`;

App页面代码：

import myLogo from "../../images/logo-light.svg";
<NavLogoImg img={myLogo} />

内容的提问来源于stack exchange，提问作者Abdelouahed BEN MHAMED