React项目引入各类SVG均报错 咨询正确使用方法

报错核心原因说明 #

React使用JSX语法，解析规则和原生HTML存在差异，同时项目构建环节的ESLint、JS编译器会对代码做语法校验，原生环境可直接运行的SVG代码如果直接复制、改后缀引入，很容易触发语法报错。 #

对应报错的修复方法 #

1. Adobe Illustrator导出SVG的style标签私有字段报错 #

这个报错是写法错误导致的：

• 双大括号是JSX中给元素style属性传JS样式对象的写法，不适用于<style>标签内部的原生CSS文本
• 未被字符串包裹的#a会被JS解析器识别为ES2022的类私有字段语法，直接抛出语法错误

正确写法是用单大括号包裹style标签内的完整CSS字符串，不要额外套对象层：

// 错误写法：<style>.cls-1{{fill:url(#a)}}</style>
// 正确写法
<style>{`.cls-1{fill:url(#a);}`}</style>

如果不想处理style标签的解析问题，最稳妥的方式是把SVG内联的CSS样式全部抽离到项目的全局/组件CSS文件中，直接删除SVG内部的<style>标签即可。 #

2. 下载的SVG引入触发ESLint Unexpected token解析错误 #

这个报错是引入方式错误导致的：直接把SVG文件后缀改为.js/.jsx当组件引入时，文件本质还是XML格式的SVG代码，不符合JS/JSX语法规则，ESLint按JS语法解析到SVG特有的标签、横杠属性等内容时，就会抛出解析异常。 #

React中使用SVG的几种标准方式 #

• 静态资源引入（适合不需要修改样式、无交互的SVG）
  直接把SVG作为静态图片资源，用img标签加载，CRA、Vite等常见脚手架默认支持该引入方式，不会触发任何语法问题：

  import registerImg from './assets/register.svg'
  export default function Demo() {
    return <img src={registerImg} alt="注册引导图" />
  }
  

• 组件化引入（适合需要调整大小、颜色、绑定交互事件的SVG）
  不要手动修改SVG后缀，利用构建工具的SVG转组件能力自动处理语法兼容：
  • Create React App创建的项目，引入时加?ReactComponent后缀：

    import { ReactComponent as RegisterSvg } from './assets/register.svg'
    export default function Demo() {
      return <RegisterSvg width={300} height={200} onClick={() => console.log('点击svg')} />
    }
    

  • Vite创建的项目，引入时加?react后缀（默认已随React插件内置支持，低版本可安装对应svg转组件插件开启）：

    import RegisterSvg from './assets/register.svg?react'
    export default function Demo() {
      return <RegisterSvg width={300} height={200} />
    }
    

• 手动内联SVG（适合需要精细调整内部结构的SVG）
  如果要把SVG代码直接写在JSX文件中，需要手动调整几个和原生HTML不一致的语法点：
  1. 所有带中划线的属性改为驼峰命名，比如stroke-width改为strokeWidth、fill-rule改为fillRule
  2. <style>标签内的CSS内容用单大括号包裹为字符串，不要套对象双大括号
  3. 所有单标签必须加闭合斜杠，比如<path d="..." />不能漏写结尾的/
     参考正确示例：

  export default function CustomIcon() {
    return (
      <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <style>{`.cls-1{fill:url(#icon-gradient);}`}</style>
        <defs>
          <linearGradient id="icon-gradient" x1="0" y1="0" x2="24" y2="24">
            <stop stopColor="#1677ff" offset="0" />
            <stop stopColor="#722ed1" offset="1" />
          </linearGradient>
        </defs>
        <path className="cls-1" fillRule="evenodd" d="M12 2L2 12l10 10 10-10L12 2z" />
      </svg>
    )
  }
  

内容的提问来源于stack exchange，提问作者Dexter