Vue 3 中动态改 SVG 颜色需设 fill="currentColor" 并通过父级 color 控制；推荐内联 SVG 封装为组件，用 props 动态绑定 color 和 size；也可用 SVG Sprite 或 vite-plugin-svg-icons 实现图标库管理与自动化注册。
在 Vue 3 模板中绑定 SVG 并动态改色，核心是让 SVG 图形元素（如 <path>、<circle>）使用 fill="currentColor" 或 stroke="currentColor"，再通过父级 CSS 的 color 属性控制颜色。直接写死 fill="#ff0000" 会锁死颜色，无法响应式修改。
用内联 SVG + props 封装成组件（最灵活推荐）
把 SVG 代码直接写进 Vue 组件模板，用 defineProps 接收 color 和 size，并通过 :fill 或 :stroke 动态绑定：
- 确保 SVG 内部所有图形标签不带硬编码
fill/stroke，只保留fill="currentColor"或删掉，由 props 控制 - 在
<svg>上用:width和:height绑定尺寸，或用style="font-size: {{ size }}px"配合fill: currentColor - 示例组件
IconHome.vue：
<template>
<svg :width="size" :height="size" viewBox="0 0 24 24">
<path :fill="color" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
</template>
<script setup>
defineProps({
size: { type: [Number, String], default: 24 },
color: { type: String, default: '#333' }
})
</script>
用 SVG Sprite + <use> 引用（适合图标库管理）
把多个 SVG 合并为一个 sprite.svg 放在 public/ 下，用 <use href="/sprite.svg#icon-name"> 引用，再靠 CSS 控制颜色：
立即学习“前端免费学习笔记（深入）”；
- 确保
sprite.svg中每个<symbol>内部图形使用fill="currentColor"，且无其他 fill/stroke 值 - 在组件中设置
.icon { fill: currentColor; width: 1.2em; height: 1.2em; }，父容器设color: red即可生效 - 若颜色不生效，检查是否被全局
* { color: xxx }覆盖了子元素（如<path>），应避免通配符劫持继承链
用 vite-plugin-svg-icons 自动化注册（适合大量图标）
借助插件自动扫描 src/assets/icons/ 下 SVG 文件，生成 symbol 并注入页面，简化引用流程：
- 安装插件：
npm install vite-plugin-svg-icons -D - vite.config.js 中配置
createSvgIconsPlugin({ iconDirs: [resolve('src/assets/icons')] }) - 创建全局组件
SvgIcon.vue，用<use :href="`#icon-${name}`">引用，并加class="svg-icon" - CSS 中定义
.svg-icon { fill: currentColor; width: 1em; height: 1em; }，调用时包裹在带color的容器里即可变色
