svg图标复用核心是“定义一次、多处引用”，通过定义模板（需唯一id和viewbox）、实例化，推荐集中存于隐藏中；颜色用fill="currentcolor"交由css控制，尺寸靠em单位或width/height等比缩放，支持自动化注入与外部sprite复用。
用 <symbol></symbol> 管理 SVG 图标，核心是“定义一次、多处复用”，不打包、不请求、不依赖构建工具也能跑，关键是结构清晰、ID唯一、引用准确。
一、基础结构：symbol 定义 + use 引用
<symbol></symbol> 本身不渲染，只作为模板；<use></use> 通过 href="#id" 实例化它。推荐把所有 <symbol></symbol> 集中放在一个隐藏的 <svg></svg> 块里（比如页面底部或单独的 icons.svg 文件中）：
- 设置
width="0" height="0" aria-hidden="true"防止占位和可访问干扰 - 每个
<symbol></symbol>必须有唯一id，建议统一前缀如icon-home、icon-search -
viewBox属性不可省，它决定图标缩放基准，通常与原始 SVG 尺寸一致（如0 0 24 24）
二、颜色与尺寸控制：靠 CSS 和属性驱动
图标颜色不写死在 <path></path> 的 fill 里，而是交给 use 或父级容器控制：
- 在
<symbol></symbol>内部路径用fill="currentColor"，这样<use></use>所在的<svg></svg>设置color或fill就能生效 - 尺寸通过
<svg></svg>的width/height或 CSS 的font-size+em单位控制，保持比例缩放 - 避免在
<use></use>上直接写fill属性（部分旧浏览器兼容性差），优先走 CSS
三、工程化集成：自动收集 + 全局组件
手动维护 symbol 列表易出错，现代项目推荐自动化注入：
- Vite 项目可用
vite-plugin-svg-icons，配置好图标目录后，插件自动生成 symbol 注册代码并注入 HTML - Vue/React 中封装一个
SvgIcon组件，接收name、size、color，内部渲染<use href="#icon-%24%7Bname%7D"></use> - 确保图标文件命名规范（如
home.svg→ ID 为icon-home），插件才能正确映射
四、外部 sprite 文件：跨页面复用方案
如果图标需多个 HTML 页面共享，可把所有 <symbol></symbol> 提取到独立文件（如 /icons.svg），再用 <use href="/icons.svg#icon-home"></use> 引用：
- 注意：Safari 对外部文件中
<use></use>的fill样式支持有限，建议搭配svg4everybody补丁库 - Webpack/Vite 项目中慎用
import直接引入 SVG，容易被 Tree Shaking 掉；改用require或插件托管 - 生成 sprite 文件可用
svg-sprite工具，支持 symbol / css / viewbox 多种模式，推荐 symbol 模式
