svg-to-tsx

rfxlamia/ronin

Converts SVG code to production-ready React TSX components with TypeScript types, proper attribute transformation, size props, and accessibility support. Use when converting SVG markup into reusable React icon components for icon systems, UI libraries, or application components.

2 stars

0 forks

9 views

View on GitHub Add to Favorites

Installation

Option 1: Use slash command in Claude Code

/install-skill https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx

Option 2: Clone to skills directory

# Global (all projects)

git clone https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx ~/.claude/skills/ronin

# Project-specific

git clone https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx .claude/skills/ronin

Add MCP server to .cursor/mcp.json:

{
  "mcpServers": {
    "skillz": {
      "command": "npx",
      "args": ["-y", "skillz-mcp", "https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx"]
    }
  }
}

Restart Cursor after adding the configuration.

Option 1: Use Gemini CLI command

gemini extensions install https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx

Option 2: Clone to extensions directory

git clone https://github.com/rfxlamia/ronin/tree/main/.agent/workflows/svg-to-tsx ~/.gemini/extensions/ronin