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. 01SVGをコンポーネント化
  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 対応