SVG 是实现图标复用最轻量语义化的方式，通过集中定义+调用，支持动态样式、响应式缩放及跨页面复用；推荐内联管理或外部 SVG Sprite 方案，并注意同源限制与 IE 兼容性。
SVG 引入，不重复加载、不冗余 DOM、支持样式动态控制。
用 统一管理图标资源
把所有 SVG 图标集中写在页面底部（或独立 SVG 文件）的 容器内，每个图标用 id。注意：要加 viewBox，不设宽高，让图标保持可缩放性。
示例：
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="icon-home" viewbox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></symbol><symbol id="icon-user" viewbox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"></path></symbol></svg>
在任意页面位置按需调用
用 标签引用 id，即可渲染图标。支持内联样式、CSS 类、甚至伪元素配合（如 ::before），也兼容响应式缩放。
- 基础调用：
- 设置尺寸：
- CSS 控制颜色：
.icon use { fill: currentColor; }，再给父svg设color: #007bff即可换色
跨页面复用：推荐外部 SVG Sprite 方案
当项目页面较多时，把所有 icons.svg 文件（纯 XML 格式），通过 调用。现代浏览器均支持，且该文件可被缓存，真正实现“一次加载、全站复用”。
注意点：
- 确保
icons.svg与页面同源，否则部分浏览器会因 CORS 拒绝解析href外部片段 - 构建工具（如 Webpack/Vite）可用插件自动合并 SVG 并生成 sprite，避免手动维护
- 服务端可配置
Content-Type: image/svg+xml，提升兼容性
兼容性与渐进增强建议
IE9+ 支持 ，但 IE11 对外部 SVG 引用有 bug（需用 或 inline fallback）。稳妥做法：
- 开发阶段优先使用内联
- 上线前用自动化工具注入 sprite 到 HTML 底部，兼顾性能与兼容
- 为关键图标提供
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
