SVGR 和 Webpack：踩坑指南

SVGR 是一款颇受欢迎的工具，可将 SVG 文件转换为 React 组件。它可以简化 SVG 图标的导入和使用，并使您能够轻松地对图标进行样式化。然而，在使用 SVGR 和 Webpack 时，您可能会遇到一些坑。

减少不必要的样式规则

默认情况下，SVGR 会为每个 SVG 元素生成一个样式规则。这可能会导致不必要的样式膨胀，尤其是在您使用大量 SVG 图标时。为了避免这种情况，您可以使用 icon 选项来减少生成的样式规则数量。

module.exports = {
  plugins: ['@svgr/webpack'],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        options: {
          svgo: false,
          icon: true,
        },
      },
    ],
  },
};

配置自定义解析器

在某些情况下，您可能需要使用自定义解析器来处理 SVG 文件。例如，您可能需要将 SVG 文件转换为内联数据 URI。为了做到这一点，您可以使用 resolveUrl 选项。

module.exports = {
  plugins: ['@svgr/webpack'],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        options: {
          svgo: false,
          icon: true,
          resolveUrl: 'data-uri',
        },
      },
    ],
  },
};

优化 SVG 压缩

SVGR 可以使用 SVGO 来优化 SVG 文件。SVGO 是一款强大的工具，可以删除不必要的元数据并简化 SVG 代码。为了启用 SVGO，您可以使用 svgo 选项。

module.exports = {
  plugins: ['@svgr/webpack'],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        options: {
          svgo: true,
          icon: true,
        },
      },
    ],
  },
};

使用 TypeScript

如果您使用 TypeScript，您可能需要使用 @svgr/typescript 包来支持 TypeScript 类型。

npm install --save-dev @svgr/typescript

然后，您可以使用以下配置来启用 TypeScript 支持：

module.exports = {
  plugins: ['@svgr/webpack'],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
        options: {
          svgo: true,
          icon: true,
          typescript: true,
        },
      },
    ],
  },
};

以上是使用 SVGR 和 Webpack 时可能遇到的常见坑以及相应的解决方案。希望这些解决方案能够帮助您更顺畅地使用这些工具进行前端开发。