Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React SVG Icon VisualizerNew to Visual Studio Code? Get it now.
React SVG Icon Visualizer

React SVG Icon Visualizer

amazzal habib

|
70 installs
| (1) | Free
Visualize React SVG icons in the editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React SVG Icon Visualizer

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

Screenshot showing the extension visualizing a DatabaseUp icon

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft