Webpack中使用@svgr/webpack处理SVG文件

@svgr/webpack 是一个用于 将 SVG 文件转换为 React 组件 的 Webpack 插件/加载器（loader）。它通过 Webpack 的模块化机制，允许开发者在 React 项目中直接导入 SVG 文件作为 React 组件使用，从而实现更灵活、高性能的 SVG 图标管理。

核心作用

SVG → React 组件转换

将 SVG 文件（如 .svg）动态编译为 React 函数式组件，代码中可直接通过 import 导入：

jsx 复制代码

import StarIcon from './star.svg'; // 直接导入为 React 组件

const App = () => (
  <div>
    <StarIcon width={24} height={24} fill="gold" />
  </div>
);

属性动态化

转换后的组件支持通过 props 动态修改 SVG 属性（如颜色、尺寸、描边等），无需手动编辑 SVG 文件。
SVG 优化

自动应用 svgo（SVG 优化工具）压缩 SVG 代码，移除冗余元数据、注释、隐藏元素等，减少文件体积。
与 Webpack 生态集成

无缝替代传统的 file-loader 或 url-loader 处理 SVG 文件的方式，提供更符合 React 开发模式的组件化方案。

典型使用场景

图标系统

在 React 应用中统一管理 SVG 图标库，通过组件化调用，避免手动复制 SVG 代码。
动态样式控制

根据业务状态动态修改图标颜色（如主题切换、交互反馈）：
jsx 复制代码
```
<ButtonIcon fill={isActive ? 'blue' : 'grey'} />
```
性能优化

通过代码内联（Inline SVG）替代图片外链，减少 HTTP 请求，提升加载速度。
SSR/SSG 支持

在服务端渲染（如 Next.js）中直接使用 SVG 组件，无需额外处理。

配置示例

在 Webpack 配置文件中添加以下规则：

javascript 复制代码

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

也可以与file-loader或url-loader配合使用：

javascript 复制代码

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'， 'url-laoder'], // 链式调用
      },
    ],
  },
};

与file-loader或url-loader配合使用时，可以通过以下方式导入，组件默认的到处名称为ReactComponent, 可通过namedExport选项进行字定义配置。

js 复制代码

import userUrl, { ReactComponent as User } from './star.svg'

const App = () => (
  <div>
    <img src={userUrl} alt="star" />
    <User />
  </div>
)

与其他工具对比

方案	特点	适用场景
`@svgr/webpack`	SVG → React 组件，支持动态属性	React 项目，需高度定制
`file-loader`	将 SVG 作为文件路径引入	非 React 项目，简单引用
`react-svg-loader`	类似功能，但社区生态不如 SVGR 活跃	旧项目兼容
直接内联 SVG 代码	手动复制 SVG 内容到 JSX 中	少量静态图标，无需复用

注意事项

类型定义

若使用 TypeScript，需添加类型声明文件（如 svg.d.ts）：

typescript 复制代码

declare module '*.svg' {
  import React from 'react';
  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

复杂 SVG 兼容性

对渐变、滤镜等高级 SVG 特性需手动验证兼容性。