将 SVG 直接粘贴到代码中，往往会产生不一致的 props 和硬编码的值。本指南提供一套干净的 React + TypeScript 图标工作流。
1) 规范化 SVG 输入
- 在转换前清理不必要的分组、元数据和内联样式。
- 保留 viewBox，让组件的缩放行为保持可预测。
- 重命名 ID 和蒙版，避免多个图标在同一页面渲染时产生冲突。
2) 生成类型安全的组件
- 使用扩展 SVG props 的 TypeScript props，获得完整的 IntelliSense 支持。
- 设置默认宽高，并允许父级使用处覆盖。
- 当图标需要继承文本颜色时，用 currentColor 替换固定 fill。
3) 集成到设计系统
- 将图标存放在可预测的文件夹中，并通过单一 barrel 文件导出。
- 在 CI 中应用 lint 规则或测试，阻止无效的 SVG 属性。
- 为语义化尺寸 token 和 aria 标签编写使用示例文档。