postcss-inline-svg最省事但不支持scss变量内联data uri，需自定义插件处理url解码、引号归一化及换行过滤。
PostCSS插件选哪个：postcss-inline-svg 还是自定义解析
用 postcss-inline-svg 插件最省事，但它默认把 SVG 当作文件路径读取，不支持直接内联字符串；如果你的组件库走的是“SCSS 变量存 SVG 字符串”路线（比如 $icon-close: "data:image/svg+xml;utf8,...";），它会静默失败——因为插件只处理 url(./icon.svg) 这类语法，不碰 SCSS 插值。真正能自动化处理内联场景的，是自己写一个 PostCSS 插件，监听 background-image 声明中含 data:image/svg+xml 的值，再做二次 URL 解码校验和引号归一化。
为什么不能直接在 SCSS 里用变量拼 data URI
这是组件库打包阶段最常崩的一环：$icon-x: "data:image/svg+xml;utf8,%3Csvg..."; → background-image: url(#{$icon-x}); 编译后生成的是 url("data:image/svg+xml;utf8,%3Csvg...")，外层双引号会让浏览器把整个字符串当无效 URL 解析（尤其 Safari 和旧 Chrome）。PostCSS 层必须拦截这类输出，把双引号包裹强制转成单引号，并确保中间没有换行或未编码空格。
- 必须删掉原始 SVG 中的
<?xml声明，否则 URL 解码后 XML 解析失败 - 所有
"、、<code>>、#必须是%22、%3C、%3E、%23，不能靠encodeURIComponent一次全包——它会把/和:也编码，导致image/svg+xml变成image%2Fsvg%2Bxml - 显式声明
width和height，别依赖viewBox；background-size无法修正 data URI 里缺失尺寸导致的缩放异常
如何让 currentColor 在 data URI 中真正生效
PostCSS 自动化流程里最容易漏掉的一步：替换硬编码颜色。如果原始 SVG 是 fill="#333"，即使你后续给元素设了 color: red，图标也不会变色——data URI 是静态快照。PostCSS 插件必须在内联前扫描并把所有 fill="xxx" 替换成 fill="currentColor"，且不能动 stroke 或 stop-color（它们不继承 currentColor）。
- 只替换
fill="..."属性，不碰fill-rule或fill-opacity - 跳过已为
currentColor或none的值，避免重复替换 - 对含
<defs></defs>的 SVG，必须把<lineargradient></lineargradient>里的stop-color改成stop-color="currentColor"并加id，否则渐变失效
复杂 SVG（带 <use></use>、<symbol></symbol>）还能走 data URI 吗
不能。PostCSS 插件可以强行把整个 SVG 字符串塞进 data URI，但浏览器加载时会忽略 <use href="#foo"></use> 这类跨引用——data URI 没有 DOM 上下文，#foo 找不到定义。一旦 SVG 里出现 <use></use>、<mask></mask>、<clippath></clippath> 引用外部 ID，就必须退出自动化内联流程，降级为 url(./sprite.svg#icon-name) 或改用内联 <svg><symbol></symbol></svg> + ::before { content: ""; background: none; } 方案。
这个判断点必须放在 PostCSS 插件最前面：正则匹配 <use>]*href=</use> 或 <mask>]*id=</mask>，命中即跳过内联，打 warning 日志。否则编译通过、运行时图标空白，排查成本极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
