Webpack中处理SVG需区分两种场景：一是作为普通资源用asset模块（小图base64、大图独立文件），二是作为图标精灵用svg-sprite-loader合并复用；同时需补充TS类型声明支持import。
在 Webpack 中处理 SVG，核心是区分两种使用场景：一种是作为独立文件（比如用 <img src="icon.svg"> 或 CSS 背景），另一种是内联为组件（比如通过 <svg><use href="#icon-home"></use></svg> 复用图标）。配置方式不同，不能混用。
当作普通资源文件直接引用
Webpack 5 内置 asset 模块类型，无需额外安装 loader。适合用 import iconUrl from './logo.svg' 获取路径，或在 CSS 中 background-image: url(./icon.svg) 引用。
- 在
module.rules中添加规则：
test: /\.(svg)$/i,
type: 'asset'
- 打包后，小 SVG 会转成 base64 data URI；大的会单独输出为文件，导出 URL 字符串
- 注意：此方式不支持 TS 直接 import SVG —— 需要补充类型声明（见下文）
当作内联图标精灵（Sprite）复用
适用于多图标项目，把多个 SVG 合并为一个 <svg><symbol> 集合，再用 <use> 引用，减少 HTTP 请求、支持动态换色。
立即学习“Java免费学习笔记（深入）”；
- 安装
svg-sprite-loader：npm install -D svg-sprite-loader - 配置 rule（需排除默认 asset 处理，避免冲突）：
rules: [
{
test: /\.svg$/,
include: path.resolve(__dirname, 'src/icons'), // 只处理指定目录
exclude: /node_modules/,
use: [{
loader: 'svg-sprite-loader',
options: { symbolId: 'icon-[name]' }
}]
}
]
- 组件中这样用：
<svg><use href="#icon-home"/></svg> - 确保所有 SVG 文件放在
src/icons下，且文件名不含特殊字符
让 TypeScript 正确识别 SVG 导入
TS 默认不认识 .svg 文件，直接 import 会报错。需手动声明模块类型。
- 在项目根目录新建
types/custom.d.ts（或放入src/types） - 内容写为：
declare module '*.svg' {
const content: string;
export default content;
}
- 并在
tsconfig.json的include中加入该路径，例如："include": ["src/**/*", "types/**/*"] - 如果仍报错，可尝试将
types文件夹移到src下，TS 有时对根级 types 支持不稳定
配套的 Icon 组件写法（React 示例）
配合 sprite 方案，封装一个可复用的 SvgIcon：
import React from 'react';
interface SvgIconProps {
name: string;
className?: string;
}
export const SvgIcon = ({ name, className = '' }: SvgIconProps) => (
<svg className={className} aria-hidden="true">
<use href={`#icon-${name}`} />
</svg>
);
- 使用：
<SvgIcon name="home" className="w-6 h-6 text-blue-500" /> - CSS 中建议设
fill: currentColor，便于继承父级文字颜色
