根本原因是浏览器解析<use>时受跨源、MIME类型和DOM可见性三重限制：必须同源、服务器返回Content-Type: image/svg+xml、<symbol>需在HTML文档流中真实存在且含viewBox，内部路径须显式设fill="currentColor"，本地file://协议下必白屏。
用 <use> 引用外部 SVG Symbol 时图标不显示
根本原因不是写法错，而是浏览器在解析 <use href="icons.svg#home"> 时卡在了三道关：跨源、MIME 类型、DOM 可见性。
- 必须同源——
icons.svg不能放在 CDN 或不同子域下，否则 Firefox/Edge 直接忽略href解析 - 服务器必须返回
Content-Type: image/svg+xml，Nginx/Apache 生产环境常漏配，Vite/Webpack 开发服默认支持但上线就掉链子 -
<symbol id="home">必须出现在可被 HTML 解析的文档流中（比如<body>开头），塞进<template>、JS 动态插入后才挂载，或用hidden属性隐藏，都会导致引用失败（IE11 不认hidden，部分现代浏览器也拒绝解析）
<symbol> 内部路径不继承父级 fill 颜色
即使你在 <svg class="icon"> 上写了 fill: currentColor，<use> 引用的外部 <symbol> 里的 <path> 也不会变色——它压根不继承。
- 必须在
<symbol>文件内部的每个<path>上显式写fill="currentColor"（不是只写在<svg>或<symbol>标签上） - 删掉原始导出 SVG 中所有固定值的
fill="#000"、stroke="red"等内联样式，否则 CSS 无法覆盖 -
viewBox必须保留在<symbol>标签上（如viewBox="0 0 24 24"），仅靠外层<svg>设width/height会导致缩放失真
本地开发时 <use href="..."> 白屏却无报错
这不是代码问题，是协议和路径双重陷阱。双击打开 HTML 文件（file:// 协议）时，浏览器收不到任何 HTTP 响应头，自然拿不到 Content-Type: image/svg+xml，直接放弃加载。
- 必须走 HTTP 服务：用
vite preview、python -m http.server，或确保 SVG 文件放在 Vite/Webpack 的public/目录下 - 路径以当前 HTML 文件为基准，不是以 JS 执行位置或 Webpack 入口为准。例如
index.html在根目录，icons.svg在assets/icons.svg，就得写href="assets/icons.svg#home" - 检查 SVG 文件是否含
<?xml ... ?>声明或<script>标签——部分浏览器会静默拒载，删掉再试
为什么 <use> 比 <img> 复杂还值得用
因为它是唯一能在复用前提下保留语义、支持无障碍、且允许 CSS 控制颜色与 hover 动画的折中方案。但代价是：你得亲手把 <symbol> 放进 HTML 文档里，而不是甩个链接就完事。
立即学习“前端免费学习笔记（深入）”；
- 不要把
<symbol>塞进<script type="text/template">或 JS 字符串里——它必须是真实 DOM 节点 - 推荐放在
<body>最开头，加style="display: none;"安全隐藏（别用hidden） - 图标数量超过 15 个、跨多个页面复用时，
<use>+ 外部icons.svg才有缓存和维护优势；少于 5 个，直接内联更省心
fill、补 viewBox、改 currentColor —— 这三步一旦漏掉一步，<use> 就变成白屏幽灵。 
