mcpField
S
svg-icon-best-practice

svg-icon-best-practice

github.com/forge-townDevelopment767 installsUpdated 9w ago
Repository

About svg-icon-best-practice

A skill for teams managing SVG icons, with guidance for turning SVGs into standalone TSX components and checking implementations against a consistent convention.

Key features

  1. 01SVG component examples
  2. 02Standalone TSX component template
  3. 03Inline SVG migration checklist
  4. 04Post-implementation verification

Use cases

  1. 01Wrap SVGs as components
  2. 02Migrate inline SVGs in a project
  3. 03Check icons against the convention

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/forge-town/skills --skill svg-icon-best-practice

After installing, type/svg-icon-best-practicein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project 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

Comments

Markdown supported