React SVG Fixer

React SVG Fixer is a Visual Studio Code extension that automatically fixes invalid SVG attributes in JSX and TSX files. It ensures your SVG code is compliant with React's requirements and eliminates warnings such as "Invalid DOM property stop-color. Did you mean stopColor?"

Preview

Features

• Automatically converts invalid SVG attributes to React-compliant attributes (e.g., stop-color → stopColor).
• Highlights files with SVG issues in the status bar.
• Allows users to fix SVG issues with a single command.
• Provides an SVG preview in a webview.

Usage

1. Open a JSX or TSX file containing SVG code.
2. Highlight the SVG code you want to fix.
3. Right-click and select "Fix SVG Attributes" or use the command palette (Ctrl+Shift+P or Cmd+Shift+P) and search for "Fix React SVG Attributes".
4. Check the status bar for any SVG issues in the current file.
5. Preview the SVG by selecting the SVG file and using the command palette to search for "Preview React SVG".

Installation

1. Open the Extensions view in VS Code (Ctrl+Shift+X or Cmd+Shift+X).
2. Search for "React SVG Fixer" and click Install.
3. Reload VS Code if necessary.