vue 3 中动态改 svg 颜色需设 fill="currentcolor" 并通过父级 color 控制；推荐内联 svg 封装为组件，用 props 动态绑定 color 和 size；也可用 svg sprite 或 vite-plugin-svg-icons 实现图标库管理与自动化注册。
在 Vue 3 模板中绑定 SVG 并动态改色，核心是让 SVG 图形元素（如 <path></path>、<circle></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></svg>上用:width和:height绑定尺寸，或用style="font-size: {{ size }}px"配合fill: currentColor - 示例组件
IconHome.vue：
<script setup><br>defineProps({<br> size: { type: [Number, String], default: 24 },<br> color: { type: String, default: '#333' }<br>})<br></script>
用 SVG Sprite +
把多个 SVG 合并为一个 sprite.svg 放在 public/ 下，用 <use href="/sprite.svg#icon-name"></use> 引用，再靠 CSS 控制颜色：
- 确保
sprite.svg中每个<symbol></symbol>内部图形使用fill="currentColor"，且无其他 fill/stroke 值 - 在组件中设置
.icon { fill: currentColor; width: 1.2em; height: 1.2em; }，父容器设color: red即可生效 - 若颜色不生效，检查是否被全局
* { color: xxx }覆盖了子元素（如<path></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}`"></use>引用，并加class="svg-icon" - CSS 中定义
.svg-icon { fill: currentColor; width: 1em; height: 1em; }，调用时包裹在带color的容器里即可变色
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
