如何访问node_modules中含SVG的XML文件并注入DOM？

方法1：用raw-loader直接导入SVG源码（Webpack环境） #

默认导入SVG会被打包工具转成资源路径，要拿到源码得让Webpack直接读取文件内容：

• 先安装依赖：npm install raw-loader --save-dev
• 在Webpack配置里加规则，精准匹配目标文件：

  module: {
    rules: [
      {
        test: /twemoji\.svg$/,
        include: /node_modules\/react-twemoji-picker\/src/,
        use: 'raw-loader'
      }
    ]
  }
  

• 之后导入就能拿到完整SVG文本，直接注入DOM：

  import twemojiSvg from 'react-twemoji-picker/src/twemoji.svg';
  // 创建容器插入SVG内容
  const svgWrapper = document.createElement('div');
  svgWrapper.innerHTML = twemojiSvg;
  // 把SVG元素移到页面目标节点（比如body）
  document.body.appendChild(svgWrapper.firstChild);
  

方法2：用svg-sprite-loader自动注入Sprite（Webpack环境） #

这个loader会自动把SVG Sprite注入页面，后续直接用<use>标签引用即可：

• 安装依赖：npm install svg-sprite-loader --save-dev
• Webpack配置规则：

  module: {
    rules: [
      {
        test: /twemoji\.svg$/,
        include: /node_modules\/react-twemoji-picker\/src/,
        use: 'svg-sprite-loader'
      }
    ]
  }
  

• 导入后无需手动处理注入，直接用图标ID引用：

  import 'react-twemoji-picker/src/twemoji.svg';
  // 页面中直接使用对应图标
  // <svg width="24" height="24"><use href="#1fa72"></use></svg>
  

方法3：Node.js脚本预读取文件内容（构建阶段处理） #

如果不想依赖loader，可在构建前用Node脚本读取SVG内容，嵌入到项目文件：

const fs = require('fs');
const path = require('path');

// 定位目标SVG文件路径
const svgPath = path.resolve(__dirname, 'node_modules/react-twemoji-picker/src/twemoji.svg');
const svgContent = fs.readFileSync(svgPath, 'utf8');

// 把内容写入可导入的JS文件
fs.writeFileSync('./src/twemoji-sprite.js', `export default \`${svgContent}\``);

之后在项目里导入生成的文件，再按方法1的方式注入DOM即可。

关于fetch请求失败的原因 #

node_modules里的文件默认不会被打包工具输出到静态资源目录，浏览器发起fetch请求时找不到对应文件，自然拿不到内容。只有通过loader处理或脚本预读取的方式，才能获取到文件源码。

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