Warum wir es gebaut haben
Jedes Frontend-Projekt braucht früher oder später eigene Icons. Designer exportieren SVG-Dateien, und Entwickler verbringen Zeit damit, Attribute umzubenennen, Editor-Metadaten zu entfernen und Markup in Komponenten zu verpacken. Bestehende Online-Konverter laden deine Dateien oft auf einen Server, zeigen Werbung zwischen den Schritten oder unterstützen nur React.
SvgJsx läuft vollständig in deinem Browser, unterstützt die Frameworks, die Teams tatsächlich einsetzen, und erzeugt Code nach modernen Konventionen – die Ausgabe lässt sich ohne manuelles Aufräumen committen.
So funktioniert es
Der Konverter enthält einen kleinen, in TypeScript geschriebenen XML-Parser. Er baut aus deinem SVG einen Baum, wendet die gewählten Bereinigungsschritte an – etwa Metadaten entfernen, Zahlen runden oder Farben durch currentColor ersetzen – und gibt den Baum als JSX, Vue-Template oder react-native-svg-Komponenten aus. Derselbe Code ist für jede Option und für fehlerhafte Eingaben durch automatisierte Tests abgedeckt.
Die Website wird statisch generiert und über ein CDN ausgeliefert. Es gibt kein Backend, keine Datenbank und kein Kontosystem.
Grundsätze
Das Projekt folgt ein paar einfachen Grundsätzen:
- Datenschutz zuerst: Dein SVG verlässt nie dein Gerät.
- Lesbare Ausgabe: formatierter Code mit genau den nötigen Imports.
- Standardmäßig sicher: Skripte und Inline-Event-Handler werden entfernt.
- In sieben Sprachen verfügbar: Englisch, Chinesisch, Spanisch, Deutsch, Französisch, Japanisch und Portugiesisch.