React SVG Icon Visualizer

A Visual Studio Code extension that visualizes React SVG icons directly in your editor.

Features

• Shows SVG icon previews at the end of component declaration lines
• Preserves original SVG colors when possible
• Supports React Native SVG components
• Works with function and arrow function components
• Handles dynamic fill colors from props

Installation

Using VSIX

1. Download the .vsix file from releases
2. In VS Code/Cursor: Extensions → "..." → "Install from VSIX..."

From Source

# Install dependencies and build
npm install
npm run compile

# Package and install
npx @vscode/vsce package
code --install-extension react-svg-icon-visualizer-0.1.0.vsix

# Or use the Makefile
make dev  # Clean, build, and install in Cursor

Usage

The extension automatically activates for .tsx, .jsx, .ts, and .js files and displays SVG icons at the end of component declaration lines.

Supported Components

The extension recognizes SVG components in various formats:

// Function components
export default function IconName(props) {
  return (
    <Svg viewBox="0 0 24 24">
      <Path d="..." fill="#color" />
    </Svg>
  );
}

// Arrow function components
const IconName = (props) => (
  <Svg viewBox="0 0 24 24">
    <Path d="..." fill={props.fill || "#color"} />
  </Svg>
);

// With TypeScript types including Readonly
export default function X(props: Readonly<SvgProps>) {
  return (
    <Svg viewBox="0 0 10 10">
      <Path d="..." fill={props.fill ? props.fill : '#717784'} />
    </Svg>
  );
}

Commands

• Toggle React SVG Icon Visualization: Enable/disable the visualization

Settings

• reactSvgVisualizer.iconSize: Size of icon preview (default: 20px)
• reactSvgVisualizer.iconPosition: Position of icon (default: "before")
• reactSvgVisualizer.iconBackground: Add background for better visibility
• reactSvgVisualizer.enabled: Enable/disable visualization

Troubleshooting

If icons aren't showing up:

• Check the Output panel (View > Output > React SVG Visualizer)
• Ensure your SVG components follow one of the supported patterns
• Try toggling the extension off and on

License

MIT