SVG Live Preview
Preview SVG elements on hover with variable editing support. Supports React and Vue syntax.
Features
- Hover Preview: Hover over any
<svg> element to see a live preview
- Variable Detection: Automatically detects dynamic attributes in both React and Vue syntax
- Interactive Editing: Click "Edit Variables" to open a panel where you can modify variable values in real-time
- Persistent Values: Your variable settings are remembered across sessions
Supported Frameworks
| Framework |
Syntax |
Example |
| React |
attr={var} |
width={size} |
| Vue |
:attr="var" |
:width="size" |
| Vue |
v-bind:attr="var" |
v-bind:width="size" |
Usage
- Open a
.tsx, .jsx, .ts, .js, or .vue file containing SVG elements
- Hover over an
<svg> tag to see the preview
- Click Edit Variables to open the editing panel
- Modify values and see the preview update instantly
Examples
React
const Icon = ({ size = 24, color = '#000' }) => (
<svg width={size} height={size} stroke={color} strokeWidth="2">
<rect x="2" y="7" width="13" height="11" rx="2" />
<path d="M16 9l5-3v12l-5-3" />
</svg>
);
Vue
<template>
<svg :width="size" :height="size" :stroke="color" stroke-width="2">
<rect x="2" y="7" width="13" height="11" rx="2" />
<path d="M16 9l5-3v12l-5-3" />
</svg>
</template>
<script setup>
const size = 24;
const color = '#000';
</script>
When you hover over the SVG:
- The preview shows the rendered icon
- Variables
size and color are detected
- You can edit them in the side panel
Supported Variable Patterns
width={varName} / :width="varName"height={varName} / :height="varName"stroke={varName} / :stroke="varName"fill={varName} / :fill="varName"- Any
attribute={variable} or :attribute="variable" pattern
Requirements
No additional dependencies required.
Commands
Edit SVG Variables - Open the variable editing panel
Release Notes
0.0.1
Initial release:
- Hover preview for SVG elements
- Support for React (
{var}) and Vue (:attr, v-bind:attr) syntax
- Variable detection and editing
- Persistent variable storage
| |
