mcpField
S
svg-icon-best-practice

svg-icon-best-practice

github.com/forge-town开发767 次安装8 周前更新
代码仓库

关于 svg-icon-best-practice

为团队提供 SVG 图标管理与迁移规范,指导将 SVG 封装为独立的 TSX 组件,并通过清单检查实现一致管理。

主要功能

  1. 01SVG 组件结构示例
  2. 02独立 TSX 组件模板
  3. 03内联 SVG 迁移清单
  4. 04完成后逐项验证

适用场景

  1. 01将 SVG 封装为组件
  2. 02迁移项目中的内联 SVG
  3. 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.tsx
best-practice-examples/components/icons/
AccuracyIcon.tsx
index.ts
references/
best-practice-examples.md
checklist.md
icon-component-template.md
migration-checklist.md

README 原文English

来自项目 README

README 暂无中文译文,以下为英文原文;中文介绍见上方。

SVG 图标管理规范

使用说明

  1. 参照 best-practice-examples/ 中的代码结构(图标组件与业务组件示例)
  2. 按 icon-component-template.md 封装 SVG 为独立 .tsx 组件
  3. 迁移内联 SVG 时参考 migration-checklist.md
  4. 完成后使用 checklist.md 逐项验证

规范: 所有 SVG 存放于 src/components/icons/,文件名 PascalCase;详细最佳实践见 best-practice-examples.md

评论

支持 Markdown