How to automate vue and svelte svg component generation in bulk
- Step 1Call the batch generation API — POST to /api/svg/to-code with framework: vue or svelte and an array of SVG files. The response is a ZIP containing one component file per SVG.
- Step 2Generate both frameworks simultaneously — Make two parallel API calls — one for Vue, one for Svelte — from the same SVG inputs. Store outputs in packages/icons-vue/src/ and packages/icons-svelte/src/ respectively.
- Step 3Publish as separate npm packages — Configure each package with its own package.json and publish independently: @company/icons-vue and @company/icons-svelte. Consumers install only the package matching their framework.
Frequently asked questions
How do I handle different prop interfaces between Vue and Svelte output?+
The API accepts a props schema object that defines prop names and types. Both outputs use the same prop interface, ensuring API consistency across frameworks.
Can I include ARIA props in the generated components?+
Yes. Pass aria: true in the API request to add aria-label, aria-hidden, and role props to each generated component with sensible defaults.
What plan is required for the batch API?+
The batch component generation API requires the Developer plan. Single-file generation is available in the browser UI on the Developer plan.
Does the API support generating Storybook stories alongside components?+
Not natively. Add a post-processing step that reads the generated component props schema and writes a corresponding .stories.ts file using a story 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.