import SomeSVG from 'xxx.svg?inline'中?inline参数的作用是什么？

语句整体含义 #

这是现代前端构建工具（如Vite、Webpack搭配对应SVG处理插件）支持的带自定义查询参数的资源引入语法，适配「将SVG作为React组件使用」的开发场景。

?inline参数的作用 #

• 无?inline的默认处理逻辑：多数构建工具默认会将引入的SVG作为独立静态资源处理，打包后会生成单独的SVG文件，引入后得到的SomeSVG是该文件的访问路径字符串，仅可用于<img src={SomeSVG} />这类场景，无法直接作为组件调用。
• 加?inline后的处理逻辑：构建工具会识别该参数，将SVG文件内容直接内联到最终的JS打包产物中，不会生成独立的SVG静态文件。配合SVG转React组件的插件能力（如Vite生态的vite-plugin-svgr、Webpack生态的@svgr/webpack），最终引入得到的SomeSVG就是可直接调用的React组件，直接书写<SomeSVG />即可渲染SVG内容。
• 附加优势：内联后的SVG组件支持直接传递属性控制样式，比如<SomeSVG fill="#ff0000" className="custom-icon" />，灵活性远高于img标签引入的SVG，同时也不会产生额外的静态资源请求。

内容的提问来源于stack exchange，提问作者Mary Biloshytska