集中管理网站图标资源的核心是将svg图标用定义在dom中并用复用，确保可访问性、样式可控与维护性。需满足：置于可见dom、id唯一合法、显式viewbox、含；用href（非xlink:href），确保dom就绪后操作；所有图形元素fill="currentcolor"，样式统一由css控制；外部引用必须走http服务且配置正确mime类型。
集中管理网站图标资源，核心是把图标“收编进 DOM”，而不是放任它们散落在文件系统里靠 <img src> 一个个加载。否则你迟早会遇到：重复请求、颜色无法统一、屏幕阅读器读不到、换主题要改几十个文件。
用 <symbol></symbol> + <use></use> 构建可复用的 SVG 图标库
这是目前最可控、最语义化、最易维护的方式。关键不是“怎么画图标”，而是“怎么让每个图标都能被 CSS 控制、被键盘聚焦、被无障碍工具识别”。
-
<symbol></symbol>必须放在文档可访问位置，比如开头的隐藏<svg></svg>里，不能塞进<template></template>或display: none容器中——否则<use href="#icon-x"></use>根本找不到目标 - 每个
<symbol></symbol>的id必须唯一且合法（只含字母、数字、短横线，不能以数字开头） - 必须显式写
viewBox="0 0 24 24"，否则缩放失真、em单位失效 - 每个
<symbol></symbol>内部必须包含<title></title>（不是aria-label），这是屏幕阅读器唯一可靠识别图标的依据
<use></use> 引用时为什么不显示？常见失效点
90% 的 <use></use> 不生效，不是图标画错了，而是路径、时机或语法踩了坑。
-
href值写成xlink:href：HTML5 中直接用href即可；IE11 及更老版本才需要 polyfill 和命名空间 -
<symbol id="icon-home"></symbol>还没解析完，JS 就执行了document.querySelector('use')：得等DOMContentLoaded，或用document.getElementById('icon-home')确认存在后再操作 -
href写了相对路径，比如href="icons/sprite.svg#icon-home"：跨域或子路由下直接静默失败；应确保所有图标定义在当前 HTML 文档内，或走 HTTP 服务并配好 MIME 类型 -
<path></path>里写了fill="#000"，又在外层<use></use>上设fill="currentColor"：冲突时以<path></path>的 fill 为准；统一删掉内部 fill，只留fill="currentColor"
颜色、尺寸、深色模式怎么统一控制？
别给每个图标单独写 style，所有样式逻辑必须收口到 CSS 层。
- 所有
<symbol></symbol>内部图形元素（<path></path>、<circle></circle>）必须显式写fill="currentColor"，不能留空、不能写死色值 - 外层容器加 class，比如
<svg class="icon"><use href="#icon-search"></use></svg> - CSS 控制：
.icon { width: 1.2em; height: 1.2em; color: #333; }；hover 变色写.icon:hover { color: #007bff; }，不是use:hover（无效） - 适配深色模式：
@media (prefers-color-scheme: dark) { .icon { color: #ddd; } }，靠currentColor自动继承
部署和路径最容易被忽略的硬约束
本地双击打开 HTML 文件（file:// 协议）时，<use></use> 引用外部 SVG 一定失败；就算路径全对，也过不了浏览器这关。
- 所有
<use href></use>若指向外部文件（如/static/icons.svg#icon-x），必须走 HTTP 服务（Live Server、npx serve、Nginx 等），且服务器响应头必须含Content-Type: image/svg+xml - Nginx 需加配置：
types { image/svg+xml svg; }；Apache 要启用AddType image/svg+xml .svg - 路径一律用绝对路径（以
/开头），比如href="/static/icons.svg#icon-home"；相对路径（./或无前缀）在嵌套路由下极易错位 - 别用
<img src="icon.svg">替代 —— 它无法填色、无法无障碍、每次用都发一次请求
真正难的不是把图标画出来，而是让每个 <use></use> 都能被键盘 Tab 到、被屏幕阅读器准确朗读、被 CSS 变量控制大小、被 localStorage 记住状态。这些细节不处理，集中管理就只是把一堆问题打包搬了个家。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
