rollup-plugin-react-svg配置详解Rollup项目中加载SVG为React组件的完整指南【免费下载链接】react-svg-loaderA loader for webpack, rollup, babel that loads svg as a React Component项目地址: https://gitcode.com/gh_mirrors/re/react-svg-loaderrollup-plugin-react-svg 是 react-svg-loader 项目中专为 Rollup 打造的插件能把 SVG 文件直接加载为 React 组件只需一行 import.svg文件就会自动经过 SVGO 压缩和 Babel 转换变成一个可以接收width、height、style等 props 的函数式组件非常适合图标管理和 CSS Modules 场景。一行 import 就能用它解决什么问题 在没有这个插件之前SVG 在 Rollup 里通常只能被当作静态资源URL 字符串处理。启用 rollup-plugin-react-svg 后写法变成了这样参考示例入口example/index.jsimport Her from ./her.svg; // 直接当组件用props 会透传到根 svg 上 Her width{300} height{300} /转换后的产物本质上是一个箭头函数组件所有 props 会展开到根svg节点上因此天然支持动态设置尺寸、颜色和类名。快速安装与 rollup.config.js 配置步骤 先安装插件开发依赖npm i rollup-plugin-react-svg --save-dev # 或 yarn add rollup-plugin-react-svg --dev然后在rollup.config.js的plugins数组中注册即可完整可运行示例见example/rollup.config.jsimport reactSvg from rollup-plugin-react-svg; export default { plugins: [ // ...其他插件 reactSvg({ svgo: { plugins: [], multipass: true }, // SVGO 优化选项 jsx: false, // 是否输出 JSX 语法 include: null, // 文件包含过滤 exclude: null // 文件排除过滤 }) ] };⚠️ 插件的load钩子只处理扩展名为.svg且命中过滤条件的文件核心逻辑在packages/rollup-plugin-react-svg/src/index.ts其他模块完全不受影响。4 个配置项逐个详解 ⚙️配置项类型默认值作用svgoobject{}透传给 SVGO 的优化选项jsxbooleanfalse产物是否保留 JSX 语法includestring | nullnull只处理匹配的文件globexcludestring | nullnull排除匹配的文件glob1️⃣ svgo压缩选项且带有安全护栏你传入的svgo对象会先经过packages/react-svg-core/src/svgo.ts中的validateAndFix校验与合并强制合并三个必需插件removeDoctype、removeComments、removeStyleElement——它们会清理掉 JSX 解析器无法处理的片段即使你手动配置也不会被移除若你未显式指定默认保留removeViewBox: false避免 viewBox 被裁掉导致图标变形注意svgo必须是对象传字符串或布尔值会直接抛出Expected options.svgo to be Object错误。2️⃣ jsx产物形态的开关jsx: false默认产物直接编译为React.createElement调用拿到就能跑无需额外的 JSX 编译步骤jsx: true产物保留原生 JSX 写法适合你的构建链路后续还有 Babel 负责编译 JSX 的情况见packages/react-svg-core/src/index.ts中transform对 preset 的选择逻辑。3️⃣ include / exclude文件过滤两者基于rollup-pluginutils的createFilter实现支持 glob 写法。例如只处理资源目录下的图标reactSvg({ include: src/icons/**/*.svg });不设置时默认处理项目内所有.svg文件include与exclude可叠加使用先命中 include 再排除 exclude。内部处理流程SVGO 优化 Babel 转换做了什么 插件对每个 SVG 文件执行两步流水线共享核心包packages/react-svg-coreSVGO 压缩去除 doctype、注释、style元素等冗余并按你的svgo配置继续优化Babel 转换由packages/babel-plugin-react-svg完成 SVG 到 React 组件的属性改写classfoo bar→className并支持通过stylesprops 覆盖兼容 CSS Modulesstylewidth: 50px字符串 →style{{ width: 50px }}对象连字符属性转驼峰stroke-width→strokeWidthdata-*、aria-*保持原样命名空间属性xmlns:xlink→xmlnsXlink。常见问题排查清单 ️Q1插件完全没生效检查两点文件扩展名必须是.svg路径是否被include/exclude过滤掉了。两者任一不满足load钩子会直接放行走 Rollup 默认的资源加载逻辑。Q2产物里出现 JSX 导致构建报错说明你设置了jsx: true但后续没有 JSX 编译环节。最简单的办法是把jsx改回false让产物直接输出React.createElement。Q3Expected options.svgo to be Object报错svgo只接受对象形式例如svgo: { multipass: true, plugins: [...] }不要传true或字符串。Q4图标尺寸/视图异常默认已强制removeViewBox: falseviewBox 不会被移除若你自定义插件时显式启用了removeViewBox图标在缩放时会失去比例请保持关闭。小结 ✅一行reactSvg()注册SVG 即组件props 全透传4 个配置项各司其职svgo管压缩、jsx管产物形态、include/exclude管文件范围内置安全护栏强制清理 doctype/注释/style、默认保留 viewBox默认值开箱即用。同一 monorepo 中还提供了对应生态webpack 版react-svg-loaderpackages/react-svg-loader、独立命令行工具react-svg-loader-clipackages/react-svg-loader-cli可按构建工具自由选择核心转换逻辑都由packages/react-svg-core统一维护。【免费下载链接】react-svg-loaderA loader for webpack, rollup, babel that loads svg as a React Component项目地址: https://gitcode.com/gh_mirrors/re/react-svg-loader创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考