Vectorio: SVG'yi Tarayıcıda Component'e Dönüştürmek

Figma'dan bir icon export ediyorsun. SVG'yi projeye atıyorsun. Ve gerçekten kullanılabilir hale gelene kadar şu dansı yapıyorsun:

xmlns:figma, data-name, data-figma-* çöplerini temizle. - id="gradient-1" gibi id'leri yeniden adlandır ki bir sonraki icon'la çakışmasın. - CSS'ten boyutlandırmayı imkânsız hale getiren width="64", height="64" gibi hardcoded değerleri sök. - Component'e sar, fill ve stroke'u prop'a taşı, JSX için casing'i düzelt (fill-rule → fillRule). - Decorative mi (aria-hidden), label'lı mı (role="img" + <title>) karar ver.

Hiçbir zaman beş dakikadan uzun sürmüyor. Ama her seferinde yapıyorsun. Ve id rename'i unutup aynı gradient-1 ile iki icon ship edersen, biri sessiz sessiz prod'da yanlış render olmaya başlıyor.

Bu iş tek paste'le bitebilir olsun istedim. Vectorio o.

vectorio.app · github.com/berkinduz/vectorio

Bir SVG yapıştır (ya da bir klasörü drop et), framework'ünü seç, sana idiomatic ve tree-shakable bir component kodu döndürsün.

Hedefler: React, Vue, Svelte, Solid — opsiyonel TypeScript ve Tailwind çıktısıyla. Her şey tarayıcıda olur. Upload yok, sunucu yok, hesap yok.

Dürüst sebep: SVG temizliği saf bir fonksiyon. Input → output, state yok, korunacak secret yok, rate limit'e takılan API yok. Bunun önüne sunucu koymak feature değil, yük.

Sıfır-backend kararının somut sonuçları:

Default'ta privacy. Icon'ların makineni terk etmiyor. Henüz yayınlanmamış ürün üzerinde çalışanlar için bu kulağa geldiğinden daha önemli...