Vue single-file component
SVG to Vue
Paste or upload an SVG and download a .vue file. The component is built in this tab from the sanitized SVG.
The template keeps SVG attribute names such as class, stroke-width, and viewBox. The script block sets the component name and does not import React.
Vue SFC
Runs in your browser. Your SVG is not uploaded.
Waiting for an SVG
Limit 500 KB and 10,000 elements. The download is a Vue single-file component. Attributes stay in SVG form, including class and stroke-width. Scripts are removed before the file is created.
Vue component
The Vue single-file component will appear here.
What the file contains
A Vue single-file component has a <script> block and a <template> block. The script is export default with the component name. The template's only root is the svg element. class stays class. stroke-width, fill-rule, and viewBox stay as they are in the SVG. Curly braces in text are escaped so Vue does not treat them as mustaches. An attribute Vue would read as a directive, such as v-html, is renamed and listed in the warnings.
Need a React component instead? Use the converter, the JSX page, or the TSX page. Those stay web components. SVG to React Native imports react-native-svg. A Svelte file is on the SVG to Svelte page. The optimizer, PNG export, and data URI tools are separate.
Example
This pair is the attribute demo run through the same emitter as the tool above. The component name is SvgIcon.
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path class="icon" fill-rule="evenodd" clip-rule="evenodd" stroke-width="2" stroke-linecap="round" d="M4 12h16"/> </svg>
<script>
export default {
name: "SvgIcon",
};
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="icon" fill-rule="evenodd" clip-rule="evenodd" stroke-width="2" stroke-linecap="round" d="M4 12h16"/>
</svg>
</template>Limits
- 500 KB per SVG. Larger files are rejected and are not emitted.
- 10,000 elements. A larger tree is rejected.
- The SVG is sanitized before the component is created. A failed sanitize produces no file.
- Scripts, event handlers, and embedded HTML are removed. Warnings list those removals.
- The copy and download actions use the Vue component. The original input is not offered as a file.
Questions
Is my SVG uploaded?
No. Sanitizing and the Vue component are built in this browser tab. The SVG is not sent to a server, saved in a database, or sent to analytics. Copy and download stay on your device. Closing the tab discards the file.
Is the download a React component?
The download is a Vue single-file component. It contains a template element and an options-API script that sets the component name. Attributes stay in SVG form: class, stroke-width, and viewBox. The file does not import React. SVGR is not used on this page, because SVGR prints React JSX.
Do scripts stay in the component?
No. The same sanitizer as the converter runs before anything is emitted. Scripts, event handlers, and embedded HTML are removed. Warnings list what was removed. If the SVG cannot be sanitized, the page does not create a component and does not offer the original markup as a download.
How do I use the file in Vue?
Save the download as a .vue file and import it from a Vue 3 project. The template has one svg root. Review the markup before you ship it. width, height, and viewBox stay on the svg element.