关于 svg-icon-best-practice
为团队提供 SVG 图标管理与迁移规范,指导将 SVG 封装为独立的 TSX 组件,并通过清单检查实现一致管理。
主要功能
- 01SVG 组件结构示例
- 02独立 TSX 组件模板
- 03内联 SVG 迁移清单
- 04完成后逐项验证
适用场景
- 01将 SVG 封装为组件
- 02迁移项目中的内联 SVG
- 03检查图标实现是否符合规范
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ forge-town/ skills --skill svg-icon-best-practice安装后在 Claude Code 中输入/svg-icon-best-practice确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
best-practice-examples/assets/UserVoteCard.tsxbest-practice-examples/components/icons/AccuracyIcon.tsxindex.tsreferences/best-practice-examples.mdchecklist.mdicon-component-template.mdmigration-checklist.mdREADME 原文English
来自项目 READMEREADME 暂无中文译文,以下为英文原文;中文介绍见上方。
SVG 图标管理规范
使用说明
- 参照 best-practice-examples/ 中的代码结构(图标组件与业务组件示例)
- 按 icon-component-template.md 封装 SVG 为独立
.tsx组件 - 迁移内联 SVG 时参考 migration-checklist.md
- 完成后使用 checklist.md 逐项验证
规范: 所有 SVG 存放于 src/components/icons/,文件名 PascalCase;详细最佳实践见 best-practice-examples.md
评论
支持 Markdown