如何动态内联通过file-loader加载的SVG文件？

我之前也遇到过一模一样的需求——从svg-inline-loader转file-loader后，想动态根据图标名内联SVG，试了几个方法都挺好用的，分享给你：

• 方案一：用require.context批量导入+fetch内联内容
  先通过Webpack的require.context把指定目录下的所有SVG都导入并建立名称映射，再用fetch获取SVG的文本内容实现内联。代码示例：

  // 假设SVG都存在src/assets/icons目录下
  const iconMap = {};
  const iconContext = require.context('../assets/icons', false, /\.svg$/);
  
  // 遍历所有SVG，建立「图标名→资源地址」的映射
  iconContext.keys().forEach(key => {
    const iconName = key.replace(/^\.\/(.*)\.svg$/, '$1'); // 从'./user.svg'提取'user'
    iconMap[iconName] = iconContext(key);
  });
  
  // 动态内联组件示例（React）
  import { useState, useEffect } from 'react';
  
  function InlineIcon({ name }) {
    const [svgContent, setSvgContent] = useState('');
    const svgUrl = iconMap[name];
  
    useEffect(() => {
      if (!svgUrl) return;
      fetch(svgUrl)
        .then(res => res.text())
        .then(text => setSvgContent(text))
        .catch(err => console.error(`加载图标${name}失败:`, err));
    }, [svgUrl, name]);
  
    if (!svgContent) return <span className="icon-placeholder"></span>;
    return <span dangerouslySetInnerHTML={{ __html: svgContent }} />;
  }
  

  这个方案不需要改Webpack配置，兼容现有file-loader的非内联场景，缺点是每个图标会发一次请求，适合图标数量不多的项目。

• 方案二：自定义Webpack规则区分内联/非内联SVG
  给需要内联的SVG加个特殊后缀（比如.inline.svg），用raw-loader处理这类文件，直接导出SVG文本内容，这样就能动态导入后直接渲染。
  先安装raw-loader：npm install raw-loader --save-dev
  然后修改Webpack配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/,
          oneOf: [
            // 处理带.inline后缀的SVG，导出文本内容
            {
              test: /\.inline\.svg$/,
              use: 'raw-loader',
            },
            // 其他SVG用file-loader处理
            {
              use: 'file-loader',
            },
          ],
        },
      ],
    },
  };
  

  同样用require.context批量导入内联图标：

  const inlineIconMap = {};
  const inlineContext = require.context('../assets/icons', false, /\.inline\.svg$/);
  
  inlineContext.keys().forEach(key => {
    const iconName = key.replace(/^\.\/(.*)\.inline\.svg$/, '$1');
    inlineIconMap[iconName] = inlineContext(key);
  });
  
  function InlineIcon({ name }) {
    const svg = inlineIconMap[name];
    if (!svg) return null;
    return <span dangerouslySetInnerHTML={{ __html: svg }} />;
  }
  

  这个方案不需要发请求，直接把SVG内容打包进代码，适合需要频繁使用的内联图标。

• 方案三：svg-sprite-loader（我最推荐的方案）
  这个loader能把所有SVG打包成一个雪碧图，通过<use>标签引用，既支持动态调用，又能实现内联效果，还能统一控制SVG样式（比如用CSS改颜色）。
  安装依赖：npm install svg-sprite-loader svgo-loader --save-dev
  Webpack配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: [
            'svg-sprite-loader',
            'svgo-loader', // 可选，用来压缩SVG代码
          ],
        },
      ],
    },
  };
  

  批量注册图标并生成动态组件：

  // 导入所有SVG并注册到雪碧图
  const iconContext = require.context('../assets/icons', false, /\.svg$/);
  iconContext.keys().forEach(key => {
    const iconModule = iconContext(key);
    // 给每个图标设置唯一id，方便<use>引用
    if (iconModule.default) {
      iconModule.default.id = key.replace(/^\.\/(.*)\.svg$/, '$1');
    }
  });
  
  function SpriteIcon({ name, className }) {
    return (
      <svg className={className} aria-hidden="true">
        <use xlinkHref={`#${name}`} />
      </svg>
    );
  }
  

  这个方案的优势是性能好（只加载一次雪碧图），样式可控性强，完全满足动态内联的需求，还能兼容后续的图标扩展。

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