css变量不能直接存储url()函数，必须只存路径字符串（如"./assets/icon-home.svg"），再通过url(var(--icon-home))调用；svg需含xmlns和xml声明，内联图标配色须用currentcolor或类名绑定多变量，禁用内联fill样式。
var(--icon-home) 不能直接当路径用，也不能塞进 fill 或 background 属性里当值；它只适合存纯字符串路径，再配合 url() 或 CSS 属性绑定使用。
为什么不能写 --icon-home: url(./icon.svg)
CSS 变量声明时就解析一次 url()，结果 var(--icon-home) 展开后是字面量字符串 url(./icon.svg)，不是可加载资源。浏览器不认这个字符串为有效 URL，背景/图标直接空白，控制台还可能报 Failed to load resource。
- 变量必须只存相对或绝对路径文本，比如
--icon-home: "./assets/icon-home.svg" - 路径必须加引号（单或双），否则含空格、括号、中文会解析失败
- 路径基准是 CSS 文件位置，不是 HTML 或 JS 所在目录
url(var(--icon-home)) 怎么用才生效
仅适用于 background-image 等接受 URL 的属性，且 SVG 文件本身要合规：
- SVG 源文件必须含
xmlns="http://www.w3.org/2000/svg"和 XML 声明（<?xml ... ?>），否则旧版 Safari 或 WebView 可能拒载 - 路径写法：如果 CSS 在
/css/style.css，SVG 在/img/icon.svg，就得写url(../img/icon.svg) - 避免中文或空格路径；调试时直接把该 URL 粘到浏览器地址栏，确认能打开 SVG 内容
内联 SVG 图标怎么用变量控制颜色
变量不能直接写进 SVG 属性（fill="var(--color)" 是无效语法），必须靠 CSS 层绑定：
- HTML 中内联 SVG：
<svg><path fill="currentColor"></path></svg>，然后父容器设color或变量 - 推荐 fallback 写法：
.icon path { fill: var(--icon-fill, currentColor); } - JS 动态改色：
document.documentElement.style.setProperty('--icon-fill', '#2563eb'); - 禁用
style="fill: ..."内联样式——它会锁死变量，优先级高于外部 CSS
想让多个路径分别配色，变量怎么组织
得靠结构拆分 + 类名 + 变量组合，不是单个变量搞定的事：
- SVG 必须含
<g></g>或带 class 的<path></path>，比如<path class="primary"></path>、<path class="secondary"></path> - 定义多个变量：
--primary-color: #3b82f6;、--secondary-color: #94a3b8; - CSS 绑定：
.icon .primary { fill: var(--primary-color); }、.icon .secondary { fill: var(--secondary-color); } - 注意：用
<use></use>引用的图标，内部路径无法被宿主 CSS 选中，必须内联或改用<symbol></symbol>+ 外部样式穿透（如:deep(.primary)）
最易忽略的一点：所有变量驱动的 SVG 样式都依赖 DOM 就绪和路径结构完整——getTotalLength() 会返回 0 如果 <path></path> 没正确闭合或被工具过度优化；currentColor 失效往往不是变量问题，而是父元素根本没计算出 color 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
