真正可维护的 SVG 图标样式方案是用 CSS 变量统一控制尺寸和颜色，SVG 必须内联、移除宽高属性、保留 viewBox、添加类名并设置 width: 1em; height: 1em; fill: currentColor；依赖继承而非直接 var(--icon-size)，配合 clamp() 实现响应式缩放。
用 --icon-size 和 --icon-color 控制 SVG 图标样式
直接在 SVG 内联代码里写 width、fill 能临时改，但一换主题或要响应式缩放就重复改多处。真正可维护的做法是把尺寸和颜色抽成 CSS 变量，在根或组件级统一定义，再让图标继承。
前提是 SVG 是内联的（即用 <svg></svg> 直接写在 HTML 里），不是作为 <img src="x.svg"> 引入——后者完全隔离了样式控制能力。
- SVG 根元素必须去掉硬编码的
width/height属性，只留viewBox - 给 SVG 加一个类名（比如
icon），然后用font-size驱动width/height，用color驱动fill - 示例：
svg.icon { width: 1em; height: 1em; fill: currentColor; }这样fill就会自动取父级的color值
为什么不能直接用 style="--icon-size: 24px" 然后 width: var(--icon-size)
可以，但容易漏掉关键前提：CSS 变量作用域。如果在某个按钮组件上设了 style="--icon-size: 16px"，而 SVG 在子元素里且没显式继承变量，它就拿不到。
更稳妥的做法是把变量声明在 :root 或组件容器上，并确保 SVG 元素能继承到——这依赖于 CSS 继承链，而 width 本身不继承，所以必须靠 em 单位间接传递。
立即学习“前端免费学习笔记（深入）”；
- 别写
width: var(--icon-size)后又忘了设height: var(--icon-size)，否则宽高不一致会拉伸 -
em比rem更灵活：父元素设font-size: 20px，SVG 的1em就是 20px，适合按钮、菜单等需要随文本缩放的场景 - 如果要用 CSS 变量直接控制，推荐搭配
calc()：比如width: calc(var(--icon-size, 1em) * 1)，避免变量未定义时失效
从 Font Icon（如 Font Awesome）切到 SVG 时的颜色控制陷阱
Font Icon 本质是文字，color 一设就全变；SVG 默认不继承 color，fill 默认是黑色，哪怕父级写了 color: red 也无效。
最简修复就是加一行 fill: currentColor 到 SVG 的 CSS 规则里。但要注意：如果 SVG 里某些路径写了内联 fill="#000"，它会覆盖 CSS 的 currentColor——得手动删掉那些内联属性。
- 用构建工具（如 SVGR）时，加
svgoConfig: { plugins: [{ removeAttrs: { attrs: 'fill' } }] }自动清理 - 如果图标来自设计稿导出，检查 Sketch/Figma 导出设置是否勾选了“Inline styles”——关掉它，让样式完全由 CSS 掌控
- 深色模式下想自动反色？只要父容器设了
color: var(--text-primary)，SVG 的currentColor就跟着变，不用额外媒体查询
响应式图标大小：用 clamp() 替代媒体查询
以前为适配移动端，得写一堆 @media (max-width: 768px) { .icon { font-size: 16px; } }。现在用 clamp() 一行搞定，且更平滑。
例如：
.icon { font-size: clamp(1rem, 2.5vw, 1.5rem); } 表示最小 1rem（小屏），最大 1.5rem（大屏），中间按视口宽度线性过渡。
- 注意单位一致性：
clamp()三个值必须同类型（全用rem或全用vw+rem混合），否则无效 - 如果图标在按钮里显得太小，别单独调 SVG 的
font-size，优先调按钮的font-size——让图标自然跟随 - 部分旧版 Safari 对
clamp()支持弱，可加降级：font-size: 1.25rem; font-size: clamp(...);
实际项目里最难的不是写对那几行 CSS，而是确保所有图标来源都走同一套规范：设计师导出不带内联样式，前端引入不加 img 标签，构建流程自动清洗冗余属性。漏掉任意一环，--icon-color 就会悄无声息地失效。
