Building Vectorio: A Browser-Based SVG to Component Generator

You export an icon from Figma. Drop the SVG into your project. And before it's actually usable, you do this dance:

Strip the xmlns:figma, data-name, data-figma-* noise. - Rename id="gradient-1" so it doesn't collide with the next icon you import. - Remove hardcoded width="64" and height="64" that make sizing through CSS impossible. - Wrap it in a component, lift fill and stroke to props, fix the casing for JSX (fill-rule → fillRule). - Decide if it's decorative (aria-hidden) or labeled (role="img" + <title>).

It's never more than five minutes. But you do it every time. And if you forget the ID rename and ship two icons that share gradient-1, one of them quietly stops rendering correctly in production.

I wanted that work to be one paste away. That's Vectorio.

vectorio.app · github.com/berkinduz/vectorio

Paste an SVG (or drop a folder of them), pick your framework, get back idiomatic, tree-shakable component code.

Targets: React, Vue, Svelte, Solid, with optional TypeScript and Tailwind output. Everything happens in the browser — no upload, no server, no account.

The honest reason: SVG cleaning is a pure function. Input → output, no state, no secrets to protect, no rate-limited API to call. Putting a server in...