在Webpack中使用SVGR将SVG转换为React组件

原创于 2025-06-04 09:00:18 发布

· 222 阅读

8 ·

版权

在Webpack中使用SVGR将SVG转换为React组件

svgr Transform SVGs into React components 🦁 项目地址: https://gitcode.com/gh_mirrors/sv/svgr

SVGR是一个强大的工具，它可以将SVG矢量图形转换为React组件。本文将详细介绍如何在Webpack构建系统中配置和使用SVGR，帮助你高效地在React项目中使用SVG资源。

什么是SVGR？

SVGR是一个专门为React生态设计的SVG转换工具，它能够：

将SVG文件转换为可直接使用的React组件
保留SVG的所有特性
提供丰富的配置选项来自定义转换行为
与主流构建工具无缝集成

安装SVGR Webpack插件

首先需要在项目中安装SVGR的Webpack插件：

npm install --save-dev @svgr/webpack
# 或者使用yarn
yarn add --dev @svgr/webpack

基础配置

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
}

这个配置告诉Webpack：

匹配所有.svg文件
只有当SVG是从JS/TS/JSX/TSX文件中导入时才应用此规则
使用@svgr/webpack来处理这些SVG文件

在代码中使用

配置完成后，你可以像使用普通React组件一样导入SVG：

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)

配置选项

SVGR提供了丰富的配置选项，可以通过两种方式指定：

在svgr.config.js配置文件中
直接在Webpack loader配置中

{
  test: /\.svg$/i,
  issuer: /\.[jt]sx?$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        icon: true,  // 将SVG转换为1em大小的图标
        svgo: false, // 禁用SVGO优化
      },
    },
  ],
}

常用选项包括：

icon: 将SVG转换为图标组件
native: 输出React Native组件
svgo: 控制SVGO优化行为
prettier: 格式化输出代码
titleProp: 添加title属性支持

混合使用SVG组件和资源

有时你可能需要同时使用SVG作为React组件和普通资源(URL)，可以通过resourceQuery实现：

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        type: 'asset',
        resourceQuery: /url/, // 匹配*.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: [/url/] }, // 排除*.svg?url
        use: ['@svgr/webpack'],
      },
    ],
  },
}

使用示例：

import svgUrl from './file.svg?url'  // 作为URL导入
import SvgComponent from './file.svg' // 作为组件导入

const App = () => (
  <div>
    <img src={svgUrl} alt="SVG" />
    <SvgComponent />
  </div>
)

在CSS中使用SVG

通过配置issuer选项，可以确保SVGR不会处理CSS中引用的SVG：

/* CSS文件中正常使用SVG */
.logo {
  background-image: url(./logo.svg);
}

与旧版loader兼容

如果你还在使用Webpack 4或需要与url-loader/file-loader配合使用，可以这样配置：

{
  test: /\.svg$/,
  issuer: /\.[jt]sx?$/,
  use: [
    '@svgr/webpack',
    {
      loader: 'url-loader',
      options: {
        limit: 8192, // 小于8KB的SVG转为DataURL
      },
    },
  ],
}

使用方式：

import svgUrl, { ReactComponent as Svg } from './icon.svg'

自定义Babel配置

默认情况下，SVGR使用内置的Babel配置。如果需要自定义(例如使用Preact)，可以这样配置：

{
  test: /\.svg$/,
  use: [
    {
      loader: 'babel-loader',
      options: {
        presets: ['preact', 'env'],
      },
    },
    {
      loader: '@svgr/webpack',
      options: { babel: false },
    },
  ],
}