SVG 应作为有状态的 UI 元素组件化封装：React 用函数组件+props 控制形态与语义，Vue 用 SFC 解耦样式逻辑，跨框架通过 Web Components 或元数据 JSON 统一契约，兼顾性能、可访问性与主题适配。
SVG 图标在现代前端项目中早已不是简单插入 <img> 或内联代码的事——它需要和组件生命周期、状态、主题、可访问性协同工作。直接写死 SVG 不仅难以复用，还会破坏框架的响应式与数据驱动逻辑。核心策略是：把 SVG 当作“有状态的 UI 元素”，而不是静态资源。
React 中 SVG 的组件化封装
推荐用函数组件 + props 控制图标形态与语义，避免全局注入或 DOM 操作：
- 每个 SVG 图标独立成组件（如
IconHome、IconClose），支持传入size、color、title和aria-hidden等标准属性 - 利用
useEffect在挂载时调用svg4everybody()（仅当项目仍需兼容旧版 IE 且使用外部 SVG sprite）；多数现代项目可直接内联 SVG，无需 polyfill - 避免在 JSX 中拼接字符串生成 SVG，改用条件渲染控制
<path>或<use>引用，确保 React 能正确 diff 和回收节点 - 配合 TypeScript 定义图标名联合类型（如
type IconName = 'home' | 'search' | 'user'），提升 IDE 提示与编译时校验能力
Vue 中 SVG 的模板集成方式
Vue 的单文件组件（SFC）天然适合结构化管理 SVG，关键在于解耦样式、逻辑与复用层级：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 将常用 SVG 路径抽离为
<svg>模板片段，存于assets/icons/目录下，通过<component :is="iconComponent"动态渲染 - 使用
v-bind绑定width、height、fill等属性，配合 CSS 变量实现主题色切换（如:fill="`var(--icon-color, ${props.color})`"） - 对带交互的 SVG（如带 hover 动画的按钮图标），用
watch或computed响应状态变化，而非手动操作document.querySelector - 利用
<slot name="icon">支持插槽定制，让父组件决定是否替换默认 SVG，兼顾灵活性与一致性
跨框架复用 SVG 的可行路径
当团队同时维护 React 和 Vue 项目时，不建议分别写两套 SVG 组件——应统一抽象图标的“契约”：
立即学习“前端免费学习笔记（深入）”；
- 以 Web Components 为中间层：用 Lit 或 vanilla JS 封装
<my-icon name="search" size="20">，两端均可通过属性传参，无框架依赖 - 构建图标元数据 JSON（如
icons.json），包含名称、尺寸、视图框、默认颜色、无障碍文本等字段，供脚手架自动生成对应框架的组件 - 采用统一 SVG 工具链：用
svgr将 SVG 文件批量转为 React 组件；用vite-plugin-svg-icons实现 Vue 自动注册，保持源文件单一可信源 - 禁止直接引用外部 CDN 的 SVG Sprite —— 无法 Tree-shaking，加载不可控，且绕过框架的 SSR 和 hydration 流程
性能与可访问性必须同步考虑
SVG 组件不是视觉装饰，而是界面语义的一部分：
- 所有图标组件默认添加
role="img"和aria-hidden="true"；若含文字含义（如“删除”按钮），则通过titleprop 注入<title>标签，并设aria-hidden="false" - 避免在 SVG 内嵌大段 base64 编码或冗余注释，用
svgo构建时自动压缩，减小包体积 - 动态图标（如加载动画）优先使用 CSS
@keyframes或transform属性驱动，而非反复重绘<path d="">，减少重排重绘开销 - 暗色模式适配不应靠 JS 切换 fill 值，而应使用
color-scheme: dark;+currentColor，让 SVG 自动继承文本色
