How to vue 3 and svelte svg component output: complete format reference
- Step 1Review the default output format — Vue output: template with root SVG, script setup lang=ts with defineProps for size and color, no style block. Svelte: SVG in markup, script lang=ts with exported props.
- Step 2Customise with template overrides — In Advanced settings, paste a component template with SVG and props placeholders to customise the wrapper for your codebase conventions.
- Step 3Verify TypeScript types — Generated components export a Props type. Import it in consuming code: import type { Props as SearchIconProps } from './SearchIcon.vue' for precise type checking.
Frequently asked questions
What props does the default Vue component expose?+
size (number, default 24), color (string, default currentColor), class (string, optional), aria-label (string, optional). All are optional with sensible defaults.
Does the Vue component use scoped styles?+
No. SVG styling is done via props and CSS custom properties — not scoped styles. This makes the component easier to customise from the outside without specificity battles.
How is the Svelte component different from the Vue component?+
Svelte uses export let for props instead of defineProps, and the markup is plain HTML rather than a template tag. The functional output is identical — same props, same SVG content.
Can I add click handlers to the generated component?+
Yes. Vue: add @click emit to the root SVG. Svelte: use on:click forwarding with svelte:element. Or add handlers in the consuming template.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.