SVG to Svelte component
Convert SVG to a Svelte component: the markup as-is, with {...$restProps} spread on the root after the file’s own attributes, so anything the caller passes — class, width, fill — wins.
How it works
Svelte keeps SVG attributes kebab-case, so the markup is emitted unchanged; the only addition is {...$restProps} on the root, placed after the file's own attributes so anything the caller passes wins. A Svelte component has no name of its own — the file name is the component name, which is why the tool shows it next to the output.
When to use it
Icon components in a Svelte or SvelteKit app. Svelte is the easiest of the frameworks to hand-write SVG for, so the converter earns its keep on volume — a directory of twenty icons converted in a sitting — and on remembering the spread you'd forget on icon fourteen.
Common problems
- Svelte 5 runes mode rejects $restProps. In runes mode, destructure instead:
let { ...rest } = $props()and spread{...rest}. The emitted form works in Svelte 3, 4 and 5's legacy mode. - A caller's class replaces the file's class. The spread is last, so it overrides rather than merges. If the file carries a meaningful class, merge explicitly:
class="icon {$props.class ?? ''}". - Duplicate gradient ids across icons. Same story as every framework: ids are page-global. Prefix them per component when two icons share defs names.
Notes
- A Svelte component is its own file, so the component name is the file name — nothing inside the markup carries it.
- $restProps works in Svelte 3 and 4, and in Svelte 5’s legacy mode. For runes mode, swap it for a {...rest} from $props().
- Svelte keeps SVG attributes kebab-case, so the body needs no rewriting at all.