内联SVG是按钮图标样式可控的唯一方式，必须删去width/height、保留viewBox、设fill="currentColor"，并通过父容器color及:hover等伪类控制变色与主题适配。
按钮里直接写<svg>就行，别套<img>
用<img>加载SVG会导致图标无法继承按钮颜色、缩放不一致、无法用CSS控制填充色——尤其在深色模式或主题切换时容易变白或消失。直接内联<svg>是唯一能保证样式可控的方式。
常见错误是把SVG当图片路径塞进<img src="icon.svg">，结果点击区域变小、hover效果失效、fill颜色死锁在SVG文件里。
- SVG代码要精简：删掉
<?xml>声明、多余命名空间（如xmlns:xlink）、注释和无用属性（id、class除非你真要用） - 保留
viewBox，删掉width/height——让CSS统一控制尺寸 - 把
fill设为currentColor，这样按钮文字变色时图标自动同步
<button>里嵌<svg>的最小可用结构
下面这段可以直接复制粘贴，兼容所有现代浏览器（包括Safari 12+）：
<button type="button" class="icon-btn">
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
<span>提交</span>
</button>
关键点：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
aria-hidden="true"：避免屏幕阅读器重复读图标（按钮文字已说明意图） -
focusable="false"：防止SVG自身抢焦点，影响键盘导航流 -
<span>包裹文字：确保文字可被CSS单独控制行高、间距 - 不要给
<svg>加display: block——默认inline会和文字基线对齐，用vertical-align: middle微调即可
CSS怎么让SVG随按钮状态变色？
核心就一条：svg { fill: currentColor; }。之后所有颜色控制交给按钮本身：
.icon-btn {
color: #333;
background: #f5f5f5;
}
.icon-btn:hover {
color: #007bff;
background: #eef2ff;
}
.icon-btn:disabled {
color: #aaa;
background: #eee;
}
如果SVG里有多个<path>，且需要不同颜色（比如图标含背景+前景），就别用currentColor，改用CSS变量：
<svg style="--fg: #007bff; --bg: #eef2ff;" viewBox="0 0 24 24"> <rect width="24" height="24" fill="var(--bg)"/> <path d="..." fill="var(--fg)"/> </svg>
注意：IE不支持CSS变量，若需兼容，老老实实用fill属性硬编码，或用JS动态写style。
React/Vue里动态插入SVG要注意什么？
框架里别直接用v-html或dangerouslySetInnerHTML渲染未清洗的SVG字符串——XSS风险高，且可能破坏React/Vue的事件绑定。
- Vue：用
<component :is="iconComponent">，把SVG封装成独立组件（推荐） - React：用
import { ReactComponent as CheckIcon } from './check.svg';，Webpack/ESBuild会转成React组件，支持props传color/size - 千万别把SVG字符串存在state里再
{svgString}渲染——丢失SVG原生交互能力（比如<use>引用、<animate>）
真正麻烦的不是嵌入，而是维护：一套图标得保持viewBox一致、路径精简、语义化aria-label，否则换主题时全得重调。
