如何在React中导入并使用存为JS文件的SVG组件？

首先将你给出的SVG组件代码保存为独立的JS文件，比如命名为 CustomIcon.js，可自行调整文件名，路径可根据你的项目结构规划存放，比如放在src/components/目录下。

• 第一步：在需要使用该SVG的React组件顶部导入组件
  注意导入路径为CustomIcon.js相对于当前组件文件的相对路径，示例：

// 示例路径，需匹配你实际的文件存放位置
import CustomIcon from './components/CustomIcon'

• 第二步：在组件的JSX结构中直接调用即可

// 基础用法，默认使用组件内置的尺寸、类名等配置
<CustomIcon />

// 自定义属性用法，可覆盖原有默认配置
<CustomIcon className="menu-icon" width="24" height="24" data-testid="custom-icon" />

可选优化：让SVG组件支持灵活透传属性 #

如果需要让组件支持动态接收任意SVG属性，你可以调整原SVG组件的代码，实现属性透传：

import React from "react";

export default (props) => (
  <svg
    className="xxx"
    data-testid="ggg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    // 透传所有外部传入的属性，优先级高于上方的默认属性
    {...props}
  >
    <path d="xxxx" />
  </svg>
);

调整后外部传入的className、width、fill等属性都会自动覆盖默认值，使用更灵活。

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