如何在ReactJS中直接导入SVG作为组件使用？

针对Create React App项目 #

方法1：通过环境变量快速配置 #

在项目根目录的.env文件中添加：

SVGR_REACT_COMPONENT_DEFAULT_EXPORT=true

或者在package.json的启动脚本里注入环境变量：

{
  "scripts": {
    "start": "SVGR_REACT_COMPONENT_DEFAULT_EXPORT=true react-scripts start",
    "build": "SVGR_REACT_COMPONENT_DEFAULT_EXPORT=true react-scripts build"
  }
}

配置完成后，直接使用import IconSaveTag from 'src/assets/IconSaveTag.svg'就能通过<IconSaveTag />调用组件。

方法2：用craco/react-app-rewired重写Webpack配置 #

如果需要更灵活的自定义配置，先安装craco：

npm install @craco/craco --save-dev

在项目根目录创建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到项目中处理svg的规则
      const svgRule = webpackConfig.module.rules.find(rule => rule.test?.test('.svg'));
      if (svgRule) {
        // 移除原有的file-loader处理逻辑
        svgRule.use = svgRule.use.filter(use => use.loader !== require.resolve('file-loader'));
        // 添加svgr-loader并设置默认导出为React组件
        svgRule.use.push({
          loader: require.resolve('@svgr/webpack'),
          options: {
            exportType: 'default',
          },
        });
      }
      return webpackConfig;
    },
  },
};

最后修改package.json的脚本，替换react-scripts为craco：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

针对自定义Webpack配置的项目 #

直接在webpack配置文件的module.rules中添加或修改SVG的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              exportType: 'default',
            },
          },
        ],
      },
      // 如果需要同时支持将SVG作为资源URL导出（比如用作img标签的src），可以添加这条规则
      {
        test: /\.svg$/i,
        issuer: { not: /\.[jt]sx?$/ },
        use: ['file-loader'],
      },
    ],
  },
};

安装对应的依赖：

npm install @svgr/webpack file-loader --save-dev

针对Vite项目 #

安装vite-plugin-svgr插件：

npm install vite-plugin-svgr --save-dev

在vite.config.js中配置插件：

import svgr from 'vite-plugin-svgr';

export default {
  plugins: [
    svgr({
      exportAsDefault: true,
    }),
  ],
};

配置完成后即可直接导入SVG作为React组件使用。

关于@svgr/cli的说明 #

@svgr/cli是用来批量将SVG文件转换为独立React组件文件的工具，并非用于配置项目的导入规则。你之前尝试它没成功，是因为方向不对——我们需要的是让构建工具在导入SVG时自动将其转为React组件，而非提前把SVG转成jsx文件。

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