SVG to Svelte Component
Paste SVG markup and get a ready-to-use Svelte 5 component — width and height forwarded as props, remaining attributes spread via ...rest. Runs entirely in your browser.
What the generated component includes
- width and height props — the SVG's declared dimensions become default values, overridable by the caller.
- ...rest spread — any attribute the caller passes (class, style, aria-label, event handlers) is forwarded to the root SVG element via
$props()destructuring. - Namespace declarations removed — the
xmlnsattribute is stripped; Svelte handles SVG namespacing automatically. - xlink:href modernised — the deprecated XLink namespace is replaced with the standard
hrefattribute. - Attribute names unchanged — Svelte templates accept standard SVG attribute names like
stroke-widthas-is; no camelCase conversion needed.
JS vs TS script
JS generates a plain <script> block with a simple $props() destructure — no type annotations, compatible with any JavaScript Svelte 5 project.
TS generates a <script lang="ts"> block with a typed destructure. The index signature [key: string]: unknown lets callers pass arbitrary SVG attributes without TypeScript complaining about unknown props.
Frequently Asked Questions
Does this output Svelte 5 or Svelte 4?+
The output uses Svelte 5 runes syntax — specifically the $props() rune introduced in Svelte 5. If your project is still on Svelte 4, use export let width = 24 and export let height = 24 in a regular <script> block, and replace {...rest} with {...$restProps} on the root element.
Why does {...rest} appear on the root SVG element?+
Spreading the remaining props onto the root element lets callers pass any additional SVG attribute — class, style, aria-label, event handlers — without modifying the component. This is the Svelte 5 equivalent of $restProps forwarding in Svelte 4.
Why are attribute names left hyphenated instead of camelCase?+
Svelte templates use the same attribute names as HTML and SVG — stroke-width, fill-opacity, and so on. Unlike React's JSX, Svelte does not require camelCase for SVG attributes. Converting them would be unnecessary and incorrect.
Is my SVG uploaded to a server?+
No. The conversion runs entirely in your browser using the built-in DOM parser. Your SVG markup never leaves your device.
Should I use TypeScript or JavaScript output?+
Choose TypeScript if your Svelte project uses lang="ts" in script blocks. You will get a typed destructure with an index signature that lets callers pass arbitrary SVG attributes in a type-safe way. Choose JavaScript for projects without TypeScript.
Related Tools
How to use
- Paste your SVG markup — the Svelte component appears instantly.
- Set a component name or leave it as SvgIcon.
- Choose JS for JavaScript projects or TS for TypeScript.
- Copy the result and save it as a .svelte file in your project.