引用 SVGR

默认情况下，Rslib 会将 SVG 图片当作静态资源处理。

通过添加 @rsbuild/plugin-svgr 插件，Rslib 支持调用 SVGR，将 SVG 图片转换为一个 React 组件使用。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm

yarn

pnpm

bun

deno

npm add @rsbuild/plugin-svgr -D

注册插件

你可以在 rslib.config.ts 文件中注册插件：

rslib.config.ts

import { pluginSvgr } from '@rsbuild/plugin-svgr';

export default {
  plugins: [pluginSvgr()],
};

示例

Bundle 模式

在 bundle 模式下，Rslib 支持 @rsbuild/plugin-svgr 下的所有用法，唯一的区别是当以 URL 形式使用 SVG 文件时，Rslib 会按照引用静态资源在产物中对应保留静态资源的 import 语句。

下面是一个使用示例：

App.jsx

import Logo from './logo.svg?react';

export const App = () => <Logo />;

如果导入的路径不包含 ?react 后缀，那么 SVG 会被当做普通的静态资源来处理，即保留对静态资源的 import 语句。

import logoURL from './static/logo.svg';

console.log(logoURL);

@rsbuild/plugin-svgr 也支持默认导入和混合导入等用法：

通过 svgrOptions.exportType 设置为 'default' 来启用默认导入。
通过 mixedImport 选项来启用混合导入，从而同时使用默认导入和具名导入。

Bundleless 模式

在 bundleless 模式下，由于每个文件都是独立经过代码转换，因此不支持 ?react 和 ?url 的引用形式，但支持下面两种使用形式：

具名导入

@rsbuild/plugin-svgr 支持具名导入 ReactComponent 来使用 SVGR，你需要设置 svgrOptions.exportType 为 'named'：

pluginSvgr({
  svgrOptions: {
    exportType: 'named',
  },
});

App.jsx

import { ReactComponent as Logo } from './logo.svg';

export const App = () => <Logo />;

所有的 .svg 文件都会被转换成 React 组件，此时你可以：

通过设置 exclude 来排除不需要转换的文件。
通过 svgrOptions.exportType 设置为 'default' 来修改为默认导出。

混合导入

如果你的库中同时存在 url 和 React 组件两种引入形式，你也可以通过混合导入的方式来使用：

pluginSvgr({
  mixedImport: true,
  svgrOptions: {
    exportType: 'named',
  },
});

此时引用的 SVG 文件会同时导出 URL 和 React 组件：

import logoUrl, { ReactComponent as Logo } from './logo.svg';

console.log(logoUrl); // -> string
console.log(Logo); // -> React component

更多信息可以参考 mixedImport 选项。

#引用 SVGR

#快速开始

#安装插件

#注册插件

#示例

#Bundle 模式

#Bundleless 模式

#具名导入

#混合导入