View Exports SVG

The ultimate VS Code extension to discover, preview, and manage your SVG component library directly inside your projects.

View Exports SVG is a powerful VS Code extension that allows you to discover, preview, and manage SVG components in your projects. It provides an interactive panel to explore your icons, edit properties, and organize your assets efficiently.

✨ Key Features

• Interactive Webview Panel – Preview and manipulate SVG components in real time
• Workspace-wide Scanning – Automatically discover all SVG components in your project
• Favorites & Recently Used – Quickly access the icons that matter most
• Multiple Ways to Open – Command Palette, context menu, or drag-and-drop files
• Quick Actions – Copy component names, download as SVG/PNG, or open source files directly
• Native VS Code Theme Support – The interface adapts seamlessly to your current theme
• Broad Framework Compatibility – Works with JavaScript/TypeScript projects, including React, Preact, and more (See Full SVG Support)

🚀 In Action

📦 Installation

1. Open Visual Studio Code
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for View Exports SVG
4. Click Install

🎯 How to Use

You can visualize your icons in multiple ways:

From the Explorer (Context Menu)

1. Right-click on a file, a folder, or a selection of multiple files
2. Select View Exports SVG 🔍

From the Command Palette

1. Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P)
2. Run the command View Exports SVG: Start Scanning to discover all icons in your project

Via Drag and Drop

1. Open the main viewer using View Exports SVG 🔍
2. Drag and drop SVG files directly onto the panel

Once the panel is open, you can instantly preview icons, copy their component names, download them as assets, or open their source files.

📚 Documentation

For more information, detailed guides, and advanced configuration, please visit the official documentation site.

🛠️ Development

Want to contribute to the development? Follow these steps:

Prerequisites

• Node.js >= 22.0.0
• pnpm >= 10.0.0

Setup

1. Clone the repository:

   git clone https://github.com/JairTorres1003/JT-View-Exports-SVG.git
   cd JT-View-Exports-SVG
   

2. Run the setup script to install dependencies and build packages:

   pnpm run setup
   

3. Run the extension:

   • Press F5 to open a new VS Code window with the extension loaded for testing

Available Scripts

From the workspace root:

# Full Release Build
pnpm run release              # Full build: core → webview → extension

# Development
pnpm run setup                # Install dependencies and build all packages
pnpm run build:extension-api  # Build the extension API package
pnpm run dev:webview          # Run server and webview in development mode

# Testing
pnpm run test:extension       # Run extension tests
pnpm run test:web-extension   # Run web extension tests

# Linting & Formatting
pnpm run lint                 # Run Biome linter
pnpm run format               # Format code with Biome

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the "feature request" tag.

📄 License

This extension is available under the MIT License. See the LICENSE file for more details.

📝 Changelog

See the full release history and updates in the official documentation: Changelog

🔗 Links

• Marketplace
• Documentation
• GitHub Repository
• Issues