vscode-svg-preview

A lightweight Visual Studio Code extension that detects inline <svg> elements in Vue components and displays a live preview directly in the editor.

Features

• Detects <svg> blocks inside <template> of .vue files
• Adds a 👁️ Preview SVG CodeLens above each <svg> tag
• Opens a Webview preview panel with your SVG rendered
• Supports multiple <svg>s per file
• Lightweight & works out-of-the-box

Screenshots

Add a screenshot or GIF of the preview here. Example:

Installation

1. Open VS Code
2. Go to Extensions Marketplace (Ctrl+Shift+X / Cmd+Shift+X on macOS)
3. Search for vscode-svg-preview
4. Click Install

Alternatively, install from the Marketplace page.

Usage

1. Open any .vue file containing inline <svg>s.
2. Look for the 👁️ Preview SVG link above each <svg> block.
3. Click it → preview opens in a side panel.

Configuration

Currently, this extension works automatically and does not require configuration. Future versions may support theme/background customization.

Contributing

Contributions are welcome! If you’d like to help improve this extension:

1. Fork this repo
2. Create a feature branch (git checkout -b feature/my-feature)
3. Commit your changes (git commit -m "Add feature")
4. Push to branch (git push origin feature/my-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Author

Deniz Derman

• GitHub

Support

If you find this extension useful, please consider giving it a ⭐ on GitHub and leaving a review on the Marketplace 🙏