Convert SVG to Svelte component
Turns an SVG into a ready-to-import Svelte component – in your browser, no upload.
Runs in your browser – your file is never uploaded
Frequently asked questions
Is my file uploaded?
No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.
How do I use the component?
Save the file next to your code and import it: import MyIcon from "./MyIcon.svelte"; Everything you pass to the component goes to the <svg> element, so <MyIcon class="h-6 w-6" aria-hidden="true" /> works as expected. The component is named after the file, in PascalCase.
What is changed in the SVG?
The markup stays plain SVG; only the XML prolog, comments and DOCTYPE are removed. The component uses Svelte 5 runes: its props are spread onto the root element with {...rest}, typed as SVGAttributes<SVGSVGElement>. Unless you switch off “Optimise first”, the SVG is also run through the same optimiser as “Optimise SVG”, which shortens the code noticeably.
What about scripts and external references?
Scripts, event handlers, external images and style sheets are removed before the component is generated – you never ship untrusted code by accident.
Related tools
Convert SVG to React component
Turns an SVG into a ready-to-import React component – in your browser, no upload.
● In your browser
Convert SVG to Vue component
Turns an SVG into a ready-to-import Vue component – in your browser, no upload.
● In your browser
Optimise SVG
Shrinks SVG files without changing how they look – in your browser.
● In your browser
Merge SVG files
Combines several SVGs into one – side by side, stacked or as an icon sprite – in your browser.
● In your browser
Vectorise image (PNG, JPG, WebP … to SVG)
Turns any raster image into an editable SVG – with sliders and live preview, in your browser.
● In your browser