SVGR 插件
默认情况下，Rsbuild 会将 SVG 图片当作静态资源处理，处理规则可参考：引用静态资源。
通过添加 SVGR 插件，Rsbuild 支持调用 SVGR，将 SVG 图片转换为一个 React 组件使用。
快速开始
安装插件
你可以通过如下的命令安装插件:
npm add @rsbuild/plugin-svgr -D
注册插件
你可以在 rsbuild.config.ts 文件中注册插件：
rsbuild.config.ts
import { pluginSvgr } from '@rsbuild/plugin-svgr';
export default {
plugins: [pluginSvgr()],
};
示例
安装完插件后，当你在 JS 文件中引用 SVG 资源时，如果你具名导入 ReactComponent 对象，Rsbuild 会调用 SVGR，将 SVG 图片转换为一个 React 组件。
import { ReactComponent as Logo } from './logo.svg';
export default () => <Logo />;
此时，如果你使用默认导入，那么 SVG 会被当做普通的静态资源来处理，你会得到一个 URL 字符串：
import logoURL from './static/logo.svg';
console.log(logoURL); // => "/static/logo.6c12aba3.png"
选项
如果你需要自定义 SVGR 的编译行为，可以使用以下配置项：
type PluginSvgrOptions = {
/**
* 修改 SVGR 配置
*/
svgrOptions?: import('@svgr/core').Config;
/**
* 修改 SVG 文件的默认导出类型
*/
svgDefaultExport?: 'component' | 'url';
};
svgrOptions
用于修改 SVGR 的选项，传入的对象会与默认值进行 deep merge。完整文档请参考 SVGR - Options。
- 类型：
import('@svgr/core').Config
- 默认值：
const defaultSvgrOptions = {
svgo: true,
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
'prefixIds',
],
},
};
pluginSvgr({
svgrOptions: {
svgoConfig: {
datauri: 'base64',
},
},
});
svgDefaultExport
修改 SVG 文件的默认导出类型。
- 类型：
'component' | 'url'
- 默认值：
'url'
比如把默认导出的内容设置为 React 组件：
rsbuild.config.ts
export default {
plugins: [
pluginSvgr({
svgDefaultExport: 'component',
}),
],
};
此时再使用默认导入，你会得到一个 React 组件，而不是 URL：
import Logo from './logo.svg';
console.log(Logo); // => React 组件
同时，你也可以通过指定 ?url 的 query 来导入 url，比如：
import logo from './logo.svg?url';
console.log(logo); // => 资源 url
类型声明
当你在 TypeScript 代码中引用 SVG 资源时，TypeScript 可能会提示该模块缺少类型定义：
TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
此时你需要为 SVG 资源添加类型声明文件，请在项目中创建 src/env.d.ts 文件，并添加相应的类型声明：
declare module '*.svg' {
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement>
>;
const content: string;
export default content;
}
如果你将 svgDefaultExport 设置为 'component'，则将类型声明修改为：
declare module '*.svg' {
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement>
>;
export default ReactComponent;
}
添加类型声明后，如果依然存在上述错误提示，请尝试重启当前 IDE，或者调整 env.d.ts 所在的目录，使 TypeScript 能够正确识别类型定义。
