使用Create React App时，如何通过Webpack直接导入SVG源码？

当然可以实现！在基于Webpack的Create React App中，要直接导入SVG的源码文本而非文件路径，有两种主流方案，我会根据你是否愿意 eject 项目来分别说明：

因为Create React App默认不允许直接修改Webpack配置，我们可以用社区工具 craco 来扩展配置，搭配 raw-loader 实现SVG源码导入：

1. 首先安装依赖：

npm install @craco/craco raw-loader --save-dev
# 或者用 yarn
yarn add @craco/craco raw-loader --dev

2. 在项目根目录创建 craco.config.js 文件，添加Webpack规则配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 添加新的规则，匹配带?raw后缀的SVG文件，用raw-loader处理
      webpackConfig.module.rules.push({
        test: /\.svg$/i,
        resourceQuery: /raw/,
        use: 'raw-loader',
      });
      return webpackConfig;
    },
  },
};

3. 修改 package.json 中的脚本命令，将默认的 react-scripts 替换为 craco：

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

4. 现在就可以通过带 ?raw 后缀的导入语句获取SVG源码了：

import downloadSvgSource from './assets/download.svg?raw';
// downloadSvgSource 就是SVG的纯文本源码，比如 "<svg xmlns='http://www.w3.org/2000/svg'...></svg>"

如果你已经做好了 eject 的准备（不可逆操作），可以直接修改Webpack配置：

1. 执行 eject 命令：

npm run eject

注意：此操作会将CRA的所有配置文件暴露到项目中，之后无法再通过 react-scripts 接收官方更新，请谨慎操作。

2. 打开项目根目录下的 config/webpack.config.js，找到处理SVG的规则（通常是使用 file-loader 的那一项），在其下方添加新的规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的规则
      {
        test: /\.svg$/i,
        resourceQuery: /raw/,
        use: 'raw-loader',
      },
      // 原有的SVG处理规则（保留默认的路径导入）
      {
        test: /\.svg$/i,
        exclude: /\.svg\?raw/,
        use: ['file-loader'],
      },
    ],
  },
};

3. 安装 raw-loader 依赖：

npm install raw-loader --save-dev

4. 同样使用带 ?raw 的导入语句获取源码即可，和方案一的用法一致。

如果你的项目中只需要少数几个SVG的源码，也可以手动把SVG内容复制到一个JS文件中导出，比如创建 src/assets/downloadSvg.js：

export default `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- 这里是SVG的具体内容 -->
</svg>`;

然后直接导入使用：

import downloadSvgSource from './assets/downloadSvg.js';

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