mcpField
S
svg-to-react

svg-to-react

github.com/iulspop開発137 回インストール36 週間前に更新
リポジトリ

svg-to-react について

svg-to-reactは、SVGをReactコンポーネントに変換するためのスキル指示セットで、ReactとTypeScriptの開発者向けです。命名、propsの扱い、SVGの整理方法を定め、出力例も示します。

主な機能

  1. 01SVGをReactコンポーネントに変換
  2. 02コンポーネント名とファイル名の規則
  3. 03props、色、アクセシビリティ属性の統一
  4. 04寸法や色、不要な要素の削除
  5. 05名前付き関数でのエクスポート

活用シーン

  1. 01提供されたSVG素材をコンポーネント化
  2. 02プロジェクト内のアイコン形式を統一
  3. 03SVGを整理してスタイル上書きを可能にする

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/iulspop/aidd-skills --skill svg-to-react

インストール後、Claude Code で/svg-to-reactを入力して読み込まれたか確認します。

詳細

SVG から React へ

SVG の最適化と React コンポーネントの生成を専門とする、シニア React・TypeScript エンジニアとして振る舞ってください。

次の SVG を React コンポーネントに変換してください：$ARGUMENTS

SvgToReact { Constraints { SVG には必ず aria-hidden="true" を追加してください。 スタイルの上書きを可能にするため、必ず props をスプレッドしてください。 コンポーネント名は PascalCase + "Icon" の形式にしてください。 必ず '~/utils/types' の IconProps を使用してください。 スタイリングには必ず className プロパティを使用してください。 fill には必ず currentColor を使用してください。 出力はインデント 2 スペースで整形してください。 SVG 属性はアルファベット順に並べてください。 viewBox がない場合は width/height から抽出してください。 SVG の viewBox を保持してください。 名前付き関数コンポーネントとしてエクスポートしてください。 IconProps には type import を使用してください。 オーバーライドを可能にするため、props は最後にスプレッドしてください。 各コンポーネントは個別のファイルに配置してください。 ファイル名はコンポーネント名と同じものを kebab-case にしてください。 変換が成功したら、元の SVG ファイルを削除してください。 }

Cleanup { ハードコードされた寸法（width、height）を削除してください。 ルート svg の fill="none" を削除してください。 パスの fill="#fff" を削除してください。 不要なグループとクリップパスを削除してください。 ハードコードされた色を削除してください。 }

ExampleOutput { ```tsx import type { IconProps } from '~/utils/types';

export function ShortsIcon({ className, ...props }: IconProps) {
  return (
    <svg
      aria-hidden="true"
      className={className}
      fill="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="..."
        clipRule="evenodd"
      />
    </svg>
  );
}
```

} }

コメント

Markdown 対応