react中如何在js文件中引用svg文件？

在React中引用SVG文件通常有两种方式：

1. 内联引用：直接将SVG内容作为字符串包含在JavaScript组件的`<div>`或自定义元素内。这称为内联SVG，例如：

import React from 'react';

function MyComponent() {
  return (
    <div>
      {/* 使用 dangerouslySetInnerHTML 渲染SVG */}
      <div dangerouslySetInnerHTML={{ __html: `<svg ...your-svg-xml-here...</svg>` }}></div>
    </div>
  );
}

export default MyComponent;

2. 外部文件引用：将SVG保存为独立的`.svg`文件，并通过`import`引入然后渲染。这种方式通常适用于SVG文件较大或需要复用的情况。首先，创建一个`.svg`文件，如`image.svg`：

<svg width="50" height="50" viewBox="0 0 24 24">
  <!-- SVG 图形 -->
</svg>

然后，在JSX中导入并使用：

import React from 'react';
import svgImage from './image.svg'; // 假设image.svg在同一目录下

function MyComponent() {
  return (
    <img src={svgImage} alt="My Image" />
  );
}

export default MyComponent;